受講料が最大70%OFF 受講料が最大70%OFF

HTMLにはW3C( World Wide Web Consortium)が定めたルールがあります。

開発者は常にこのルールを厳守しようと心がけているはずですが、やはり開発時のミスや間違った文法での開発というケースも無くはありません。

しかしこれらの人的ミスは、W3Cが提供しているHTMLチェックツールで簡単に回避することが出来ます。

そこで今回の記事では、HTMLやCSSの文法やミスをチェックするためのツールや、必要性について解説してみたいと思います。

文法エラーがSEO評価に及ぼす影響

HTMLコーディングの知識の学習ルートは書籍や、セミナー、訓練校などいくつもあります。

恐らくそれらのルートのほとんどは「W3Cに準拠した正しいWeb構築でSEO対策をしましょう。」というような説明をしているはず。

しかし、少なくともGoogleについてはこの説明が実は間違っているということが明言されました。

Google検索エンジンにおける共同発明者の一人でもあるマシューカッツ氏は次のように述べています。

僕たちは、W3Cに準拠しているからといってWebページの順位を上げるようなことは何もしていない。Webにある大多数のページは準拠していないからね

これは逆に言い換えると、世の中には準拠していないどころか、文法エラーのまま構築されW3cの仕様に沿っていないページは沢山あるという意味にも取れます。

結果として2020年現在、世界中で最も利用されているであろう検索エンジンでの検索結果と文法エラーについての因果関係はないといえるでしょう。

ガラリと変わったHTMLルール

HTML5になり今まで通用していたルールが大幅に変更されたことは、多くの方が知っている事実だと思います。

変更というよりは改善という方がより近いイメージです。

このルール変更では、入れ子に出来るタグの関係性や要素にも影響を及ぼしています。

要素について

HTML5以前はブロックレベル要素とインライン要素という分類がありましたが、これがHTML5では完全に廃止されました

代わりに、全てのタグが次の7つのカテゴリーの何れかに分類されます。

HTML5で導入されたカテゴリー
  • メタデータコンテンツ(Metadata content)
  • フローコンテンツ(Flow content)
  • セクショニングコンテンツ(Sectioning content)
  • ヘッディングコンテンツ(Heading content)
  • フレージングコンテンツ(Phrasing content)
  • エンベッデッドコンテンツ(Embedded content)
  • インタラクティブコンテンツ(Interactive content)

順に説明すると、次のようになります。

コンテンツモデル

コンテンツモデルとは子要素にしても良い要素のカテゴリーの事を指します。

HTMLでは既に説明した通りレベル分類が廃止されたため、入れ子についてもカテゴリーで管理されています。

しかし同時にこの変更によって、HTML5以前では考えられないような入れ子も出来るようになりました。

次のコードを見てください。

<body>
	<a>
		<div>
			<p>HTML5でOKになった文法はこちら</p>
		</div>
	</a>
</body>

HTML構築経験が長ければ長いほど違和感しか感じないこのコードですが、HTML5では問題ないとされています。

これは「<a>タグにネスト出来る要素はメタデータコンテンツの一部を除いたほぼ全ての要素」と定義されているためです。

これらのルールは詳しく説明するとかなり複雑になるため、インターネットで入れ子のチートシートを見ながら構築する方法もあります。

この記事では解説を省略しますが、より詳しく知りたい方は「html5 入れ子」などで検索をかけると新しいルールについて解説してある記事がいくつも出てくるので学習してみてください。

文法エラーを正す必要性

世の中に出回っているWebサイトのうち、HTMLが正しい文法で記述されているWebサイトは全体の5%未満といわれています。

これはHTMLのバージョンによって正しい文法の定義が変わるからという理由だけでなく、HTMLとそれに付帯する権利者が異なるためです。

例えばHTMLのルールについてはW3Cという団体がその権利を持っていますが、世界で最も利用されている検索エンジン”Google”の権利はGoogle社が保持しています。

googleは独自のアルゴリズムでページランクを算出していますので、必ずしもHTMLの記述方法が正しかったからといってページランクが上がるわけではありません。

もっと言うと、HTML記述よりもユーザビリティが重視される可能性の方が高いと言えるでしょう。

「では文法エラーを修正する必要はないのではないか?」と思われる方も多いと思いますが、これもまた間違いです。

今でこそGoogleは独自のアルゴリズムでページランクを評価していますが、googleが開発したアルゴリズムはW3Cとは方向性が違うとも言い切れないからです。

またもしかしたら、未来のどこかの時点で権利が統合される可能性もあります。

そういったいくつもの考えられる可能性に出来るだけ寄せて制作することで、インターネットの如何なる変化にも順応できるというわけです。

HTMLとCSSの文法チェックツールについて

やっと本題ですが、文法チェックが簡単に出来るツールというのが存在します。

いくつかあるので、自分に合ったツールを使えばいいと思います。

ここではそのツールについていくつかご紹介していきます。

Dirty Markup

このツールはHTMLだけでなくCSSについても文法をチェックしてくれます。

デザインも見やすく人気のツールとなっています。

またチェックするだけでなくコードを整形表示してくれる機能もあり、インデントの自動挿入なども可能です。

使い方はソースコードを張り付けるだけ。

貼り付け時点で瞬時にエラーを検知しお知らせしてくれます。

「Clear」ボタンを押すとインデント自動挿入になりますので、後は再度、整形されたソースコードをコピーするだけとなっています。

HTMLエラーチェッカー

Google chromeのアドオン(拡張機能)です。

チェックしたいページをchromeで開き、右上のアイコンをクリックするだけというシンプルな操作性となっています。

開発元がGoogleということもあり、信頼性に関しては全く問題ないでしょう。

外部Webサービスではないので悪意のプログラムが仕込まれているといったようなこともないため、ブラウザでchromeを使っている方であれば入れておいて損はないと思います。

使い方はGoogleストアからアドオンをダウンロードするとGoogle chromeの右上にアイコンが表示されますので、検査したいサイトを開き後はアイコンをクリックするだけです。

W3C Markup Validation Service

HTMLルールを決めているW3Cの公式ツールです。

本家が提供しているツールというだけあって制度は当然一番といえるでしょう。

こちらのツールはサイト型となっているため、URLを入力してチェックすることも出来ます。

ただし他のツールと比べ、動作が重く結果は英語で表示されますので多少なりとも英語に関しての理解度が必要となります。

まとめ

いかがでしたか?

今回はHTMLの文法チェックについてのあれこれについて解説してみました。

構築後に初めて必要となるツールでもあるためHTMLに直接係る知識ではありませんが、重要度的にはコーディングと同等もしくはそれ以上だとも言えます。

学習を始めた方はこういったルールも一つ一つしっかりとマスターしていくように努力してみましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。