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>
	&copy;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に貼ればよい。