納品前に必ずチェック!!HTMLエラーチェッカーを紹介

HTMLエラーチェッカー

HTMLを書いた後にブラウザで表示すると、HTMLに致命的なミスがなければ思い通りに表示してくれます。

それは使用しているブラウザが補正してくれているからです。

 

しかし、ブラウザごとにどう補正してくれるかは別で、ブラウザのバージョンアップなどで補正してくれたりしてくれなかったりすることでしょう。

 

納品前には正しくHTMLが記述されているかを確認したいものです。

 

この記事では、HTML(またはCSS)が規約に沿って正しく書かれているかを検証する(バリデート)ツールを紹介します。

 

 

W3CのHTMLエラーチェッカー

The W3C Markup Validation Service」を使います。

 

W3CとはWEBに関する技術の標準化団体です。

HTMLやCSSをひとりひとりが独自の文法ルールで書いていては使い回しやデバッグに不便です。

みんなで共通のルールを作って、それを守っていきましょう」というのが標準化団体の仕事で、WEBに関する技術を標準化しているのがW3Cという団体です。

特定の単独の組織が決めているのではなく、多くの企業や研究機関がW3Cに加盟してそれぞれ意見を出し合っています。

 

そんなW3Cが定めたHTMLのルールに基づいたコードかどうかを検証できるツールが「The W3C Markup Validation Service」です。

The W3C Markup Validation Service

灰色の枠の上に3つのタブがあります。

 

「Validate by URI」ではチェックしたいHTMLがあるページのアドレスを入力します。

「Validate by File Upload」ではチェックしたいローカルのファイルをアップロードします。

「Validate by Direct Input」ではチェックしたいHTMLをテキストエリアに直接書きます。

 

ここではValidate by Direct Inputを使って、検証結果を見てみます。

以下のようなHTMLを検証します。

 

上記のHTMLは確かにブラウザ(chrome)で表示することができます。

しかし、コーディングに慣れれば自然とわかることですが、ここにはW3Cが定めたコーディング規約に違反している箇所が2つあります。

どこだかわかりますか?

 

 

 

 

…正解は下…

 

 

 

 

 

 

 

 

正解はW3Cの検証ツールで見てみましょう。

「Validate by Direct Input」に直接HTMLを書いて検証してみましょう。

以下の結果が返ってきました。

バリデーターの検証結果

2つの「Error」が返ってきました。

 

ひとつめは、「h1タグの子要素にdivタグを使ってはならない」と言っています。

h1タグやdivタグに限らず、ヘッダータグ内にブロック要素を入れてはなりません

 

ふたつめは、「imgタグ内にはalt属性がなければならない」と言っています。

これはそのままの意味です。

 

h1タグの子要素にブロック要素があってもブラウザは表示されます。imgタグにalt属性がなくても表示されます。

 

あくまでも、W3Cが定めた規約に違反しているかどうかを検証します。

 

WEB上に公開したHTMLの検証ではValidate by URIも使えます。

おそらく「Warning」がたくさん表示されると思いますが、W3Cの規約に完璧に従うことはかなり難しいです。

致命的またはSEOに影響するようなエラーを見つけて修正しましょう。

 

検証する際にいくつかのオプションがあります。

「More Options」をクリックするとオプションのメニューが開きます。

MoreOptions
  • Character Encoding … 文字コードを指定
  • Document Type … HTMLのバージョンを指定
  • List Messages Sequentially … 検証結果をソースコード順に並べる
  • Group Error Messages by Type … 検証結果をその内容ごとに並べる
  • Show Source … ソースコードを表示する
  • Clean up Markup with HTML-Tidy … ソースコードをHTML-Tidyで表示する
  • Show Outline … アウトラインを表示する
  • Validate error pages … エラーページにも検証をかける
  • Verbose Output … 冗長的に出力する

 

普段はあまり使わないと思います。

 

 

その他の検証ツール

W3C以外にもWEB上に様々な検証ツールがあるようです。

いくつか紹介します。

 

 

chromeの「HTMLエラーチェッカー」

WEB上にあがっているページであればchromeのアドオンの「HTMLエラーチェッカー」を使うことができます。

ページを更新したあとにHTMLエラーチェッカーを起動するとエラーの箇所を表示してくれます。

 

 

Firefoxの「HTML Validator」

Firefoxのアドオンに「HTML Validator」があります。

アドオンをインストールしてからfirefoxの開発者ツールを開くと右側にHTML Validatorがあります。

firefoxのHTML Validator

 

 

まとめ

ここに紹介した以外にも世の中には多くのHTMLエラーチェッカーがあります。

chromeで開発するのであれば、W3Cの「The W3C Markup Validation Service」やchromeの「HTMLエラーチェッカー」を使用すればいいと思います。