W3C Markup Validation Service
HTMLの文法をチェックするために、W3CがValidation Service(以下、validator)を提供している。
validator(リンクはこちら)にアクセスすると以下の画面が出てくる。
「ここは、HTML、XHTMLなどのValidationをするところだから、CSSなどを検証したいときは他へ行って」と書いてある。
検証は、上の画面でURLを打ち込んでもいいし、(公開サーバーにUpしてない場合などは)ファイルをUpload(下の図)しても、HTMLをフォームに打ち込んでもいい。
以下に、(殆どのブラウザで)問題なく表示されるが、エラー(警告)となるパターンをこのサービスに食わせてみる。
このソースには、
- オープンしているタグ
- / >で終わるショートタグ
が入っている([!!]の部分)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Style Sample</title> <link rel="stylesheet" type="text/css" href="egp-hp-default-layout.css" > <link rel="stylesheet" type="text/css" href="egp-hp-fixed2columns1-layout.css" > <link rel="stylesheet" type="text/css" href="egp-hp-pop1-design.css" > <script type="text/javascript"> </script> </head> <body> <div id="egp-hp-container"> <!--// ヘッダー --> <div id="egp-hp-header"> <div class="egp-hp-inner"> <h1> 大見出し </h1> </div> </div> <!--// コンテンツ --> <div id="egp-hp-contents"> <div id="egp-hp-main"> <div class="egp-hp-inner"> <h2>中見出し</h2> <!-- [!!] ここにpタグがない --> 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 </p> <ul> <li><a href="#">リンク1</a> <li><a href="#">リンク2</a> <li><a href="#">リンク3</a> <li><a href="#">リンク4</a> </ul> <h2>中見出し</h2> <ol> <li><a href="#">リンク1</a> <li><a href="#">リンク2</a> <li><a href="#">リンク3</a> <li><a href="#">リンク4</a> </ol> </div> </div> <div id="egp-hp-sub"> <div class="egp-hp-inner"> <h2>Welcome to EGP!</h2> <p> 文章。文章。文章。文章。文章。文章。文章。文章。 <!-- [!!] ショートタグ --> <br/> <br> 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 文章。文章。文章。文章。文章。文章。文章。文章。 </p> </div> </div> </div> <!--// フッター --> <div id="egp-hp-footer"> <div class="egp-hp-inner"> <p> ©2008 someone All Rights Reserved. </p> </div> </div> </div> </body> </html>
これをFF3(Windows版)で表示したものが以下(レイアウトと色はCSSファイルで定義)。
そして、これをValidatorに食わせる。
URLを入力後、Optionで「Show Source(Validatorが食ったソースが行番号付で表示されるので、エラー対処に便利)」、「Verbose Output(メッセージが皆返ってくる)」にチェックをいれる(下図)。
すると、赤いバックグラウンドで「エラーだよ」と表示する画面が帰ってくる。
エラーの内容は下図のように画面の中央部にでる。
オープンしているタグ(エラー)には、「編集時に消し忘れてしまう場合なんかがあるよ」と書いてある。
ショートタグ(警告)には、「せっかく、HTML 4.01 Strict DOCTYPEがあるんだから、そういう書き方は止めて、XHTMLで書こう」というようなことが書いてある。
とても親切。
これを直して、Revalidateすると、下の画面のような緑のバックグラウンドで「チェックOK」とでてくる。
必要であれば、W3CでValidate済みのマーク(下)をHTMLに貼ればよい。