意外と多い HTML Validation チェックが通らないブログパーツ（正しい HTML4 or XHTML））

HTML5 移行前に確認しておきたい HTML4 or XHTML の典型的な間違い

2010-08-15 23:30 追記
id:satoshi351017 さんにコメント欄でご指摘頂いた間違いを修正しました（参考：エスケープする文字 - 雑記帳）

前提

DTD の読み方はここでは解説しないので DTDの読み方参照のこと
そろそろ「IE6」の「非標準」を考慮しなくてもよいのではというスタンスで書きます

The W3C Markup Validation Service で自分のブログ（Doctype: HTML 4.01 Transitional）をチェック

...orz よーく見てみると、エラーはブログパーツに多い
ちなみにはてなトップページ（Doctype: XHTML 1.0 Strict）は...

大惨事っ！！（当然こちらの原因はブログパーツじゃないが）

共通の間違い：ＵＲＬの＆は＆ａｍｐ；

<!-- 間違いの例 -->
<a href="https://www.hatena.ne.jp/login?backurl=http%3A%2F%2Fd.hatena.ne.jp%2Fk2jp%2F&add_timestamp=1">ログイン</a>

じゃなくて、正しくは

<a href="https://www.hatena.ne.jp/login?backurl=http%3A%2F%2Fd.hatena.ne.jp%2Fk2jp%2F&amp;add_timestamp=1">ログイン</a>

ちなみに、ブラウザのアドレスバーに入力するときは＆のままでいい

共通の間違い：必須属性がない

img タグには alt 属性が必須（自動読み上げソフトでも利用されるとのことなので無駄骨ではない）

<!-- 間違いの例 -->
<img src="/images/icon_status_versionup.gif" class="icon-status" />

正しくは

<!-- 間違いの例 -->
<img alt="icon_status" src="/images/icon_status_versionup.gif" class="icon-status" />

style タグには type="text/css" のように type 属性が必須

<!-- 間違いの例 -->
<style>
  .hatena-body {margin:1px auto;width:100%;}
</style>

正しくは

<style type="text/css">
  .hatena-body {margin:1px auto;width:100%;}
</style>

script タグにも style と同様に type="text/javascript" のような type 属性が必須

<!-- 間違いの例 -->
<script src="http://widgets.twimg.com/j/2/widget.js"></script>

正しくは

<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>

以上の２つだけでかなりのエラーは減るが...

はてなダイアリーでブログパーツを Valid になるよう修正しようとすると...

触るな弄るな Death か...orz（誰か「はてなアイデア」に要望して）

おまけ：script もしくは style タグで他に注意すること

2010-08-15 23:30 追記
以下は HTML4 限定の話

スクリプト中やスタイルシート中で「閉じるタグ」つまり ETAGO(End TAG Opener) <⁄ は使用禁止

<!-- マズイ書き方の例 -->
<SCRIPT type="text/javascript">
      document.write ("<EM>This won't work</EM>")
</SCRIPT>

こちらにも書いてあるが、スクリプトもしくはスタイルシートがここで終了と誤認識する（ブラウザ全てが同じ挙動かどうかは未確認）
解決策は閉じるタグ ETAGO のスラッシュ／をエスケープすること（例：<¥⁄　）

<SCRIPT type="text/javascript">
      document.write ("<EM>This won't work<\/EM>")
</SCRIPT>

2010-08-15 23:30 追記
XHTML で script や style タグ内は DTD で以下の通り PCDATA(Parsed CDATA) なので、<... と書いた時点で script や style でなく HTML と解釈されてアウト
<!ELEMENT script (#PCDATA)>
<!ELEMENT style (#PCDATA)>
ちなみに HTML4 で script や style は DTD で以下の通り CDATA なので内部にタグを埋め込むこともできます（でも、IE6 のバグで PCDATA と誤認識したりもするのでオススメできません）
<!ENTITY % Script "CDATA" -- script expression -->
<!ELEMENT SCRIPT - - %Script;          -- script statements -->
<!ENTITY % StyleSheet "CDATA" -- style sheet data -->
<!ELEMENT STYLE - - %StyleSheet        -- style info -->