HTMLを綺麗に保つ12の原則

 

Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

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サイトの構築で紹介されている。これらの文書も合わせて参考にするといいだろう。



転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

『おそ松さん』よりひょこっとラバーストラップの第2弾が登場
[20:00 7/23] ホビー
みなさんメガネ男子は好きですか?『おそ松さん』が一番くじでメガネ姿を披露
[20:00 7/23] ホビー
「夏目友人帳 伍」は10月から!夏目とニャンコ先生の新カットも公開
[19:38 7/23] ホビー
東国原英夫vs上西小百合が因縁の生対決 - 27時間テレビ『バイキングSP』
[19:33 7/23] エンタメ
[長谷川博己]始球式“失敗”のゴジラをフォロー ナイスゴールで会場沸かす
[19:30 7/23] エンタメ

求人情報