HTMLの入れ子の一覧確認シート

先日、開発中のWEBサイトのバリデーション・チェックをしたところ、「dl要素には、divを入れられない」という指摘を受けました。

あまり使わないタグだったのでミスも致し方ないとも思ったのですが、ふと他のタグについてもHTMLの入れ子構造が適切に記述できているか不安になりました。

そこで、HTMLの入れ子の一覧ができるサイトを検索で探したのですが、適当なのが意外と見つからず一苦労。

最終的に見つけたのが、W3Cのチート・シートです。英語のページなのですが、実質、タグの一覧なので、見るのは比較的容易です。

上がXHTML 1.0で、下がXHTML 1.1です。

簡単に説明しておくと、表の左がタグの「要素」（Element）の列です。表の中央は、取り得る属性（Attributes）の列です。そして、表の右が、取り得る入れ子要素（Content model）です。

つまり、左の要素は、右の入れ子要素をとることができるという訳です。

なお、左の要素は色分けされており、水色はインライン要素、紫および灰色はブロック要素となっているようです。（紫と灰色の違いがイマイチわからなかったので分かった方は、コメントで指摘してくれると嬉しいです。）

また、右の入れ子要素についても、色分けされており、水色はインライン要素、紫はブロック要素となっています。

この入れ子のチートシートを見て確認するとHTMLのマークアップのミスが確実に減らせます。

ちなみに、HTMLのバリデーション・チェックも、W3Cのサイトでできます。http://validator.w3.org/

CSSのバリデーション・チェックも同様に、W3Cのサイトでできます。
http://jigsaw.w3.org/css-validator/

CSSの方は、日本語に対応しているので使いやすいです。

結論として、HTMLのマークアップ時には、入れ子のチートシートをみて確認し、所々で、バリデーション・チェックをするのが効果的といえそうです。