HTMLを綺麗に保つ12の原則

Chris Coyier氏がSmashing Magazineにおいて12 Principles For Keeping Your Code CleanのタイトルのもとHTMLコードをクリーンにするための12の原則を紹介している。厳密には11の原則だが、HTMLをクリーンに保つ上で実践的で効果的なものだ。WebデザイナやWebデベロッパは一度チェックしておきたい。12 Principles For Keeping Your Code Cleanで紹介されている原則を要約すると次のようになる。

[原則1] HTML 4.01を採用する場合でもXHTML 1.0を採用する場合でもStrict指定のDOCTYPEを使う

[原則2] 文字コードの指定はhead要素で一番最初に記述する。&は&のように表記する

[原則3] 適切にインデントする

[原則4] CSSとJavaScriptは外部ファイルに分離する

[原則5] タグは適切にネストする。a要素にh1要素を入れるというのはインライン要素にブロック要素を含めているという典型的な例。h1要素の中でa要素を指定する必要がある

[原則6] 不要なdiv要素を使わない

[原則7] class属性には何を意味するかを適切に記載し、将来変更するかもしれないスタイル情報などを含めない

[原則8] 書体はCSSで指定する。たとえば全部大文字で書くといったことはしないで、そういった場合にはCSSでtext-transform: uppercaseを使う

[原則9] divのid属性やclass属性に不要な情報を書かないで、代わりにbody要素のclassにコンテンツの内容を意味する言葉を指定する

[原則10] バリデーションを通してタグの閉じ忘れなどがないようにする。W3Cのバリデータが便利

[原則11] 論理的な順序で記述する。たとえばフッターは先頭ではなく末尾になるべき

[原則12] できることからする。既存のHTMLを書き換えるのは面倒だしCMSを使っている場合はおかしな記述を強要される。重要なのはHTMLをクリーンに保つ原則を知ったということにあり、次にHTMLを記述するときにできるところからはじめればいい

12 Principles For Keeping Your Code Cleanにはダメな例がコードとともに示されているため、英語が苦手という場合にも表示されているHTMLから指摘されている内容を推測しやすいようになっている。

HTMLとCSS、JavaScriptを分離すべきという説明は同じくSmashing MagazineにおいてUnobtrusive DOMプログラミングとして紹介されている。検証ツールにはObtrusive JavaScript Checkerが使えるだろう。HTMLとCSS、JavaScriptを分離して累進的に制作しようという取り組みは累進的拡張によるWebサイトの構築で紹介されている。これらの文書も合わせて参考にするといいだろう。