『What Beautiful HTML Code Looks Like』という画像ファイルで、きれいなHTMLを記述するためのポイントが解説されていました。
以下、私なりの訳文です。
——
DOCTYPE宣言は適切に
すごくたくさん記述されていますが、DOCTYPE宣言文は重要です。
DOCTYPE宣言はあなたのコードを有効にするだけでなく、ページをどのようにレンダリングするかブラウザに伝えます。
シンプルな HTML文書でもDOCTYPE宣言を削除してはいけません。
Head要素の部分をきちんとする
title要素を設定します。Characterも適切に設定します。スタイルシートはリンクさせます。(印刷用のスタイルシートを含めましょう!)
(Java)スクリプトもリンクさせ、HTMLファイルには一切記述してはいけません。
外部ファイルはそれぞれ関連するフォルダに入れます(例:”CSS”や”Scripts”。
BodyにIDを設定する
body要素にIDを設定することで、ページごとにCSSのプロパティを設定して適用させることができます。
例えば、ホームページh2要素だけ違うように見せたい場合などに使えます。
その際、CSSに「#home h2{}」と記述するだけでよく、他のh2要素には影響しません。
全ページに用いるメインのdiv要素
全ページの内容をまとめるための、”wrap”などと名づけたメインのdiv要素を設置することで、多くの項目をすぐに操作しやすくなります。
ページの横幅が固定されたサイトで横幅を設定したり、横幅は可変するサイトでの最大値と最小値を設定できます。
共通するコンテンツを読み込ませる
多くのウェブサイトにおいて、ページ間で共通している部分があります。メニューバー、サイドバー、フッター、”boxes”などです。
これらの内容は動的に読み出したほうが良いでしょう。データベースから書き出すか、簡単なPHP構文で読み込ませます。
意味のあるきれいなメニュー
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
重要な内容は一番最初に
新着情報やイベントなど最も重要な情報がある場合、できる限りHTMLの一番最初に記述するのがベストです。
サイドバーがナビゲーションだけの役割で、重要な内容を含んでいない場合、HTMLの最後に持ってくるのがベストです。
終了タグを適切に
strong要素を使うなら、終了タグもきちんと使用します。
たとえ終了タグを使わずにレンダリングでOKが出ていても、怠けて終了タグを省略してはいけません。
コードにはタブを加える
一度、コードのセクションごとにタブを入れてみると、コードの構造がわかりやすくなります。
コードが左端にきっちりそろっている状態では、コードを読んで理解するのが恐ろしく感じます。
headerタグ( h1 要素など)の階層構造
設計するようにheaderタグを使用します。
セクションの内容にあったタイトルを記述し、内容の階層構造を意味ある設定をします。
スタイルは使用しない
HTMLには内容と構造だけを記述し、スタイルは加えません!
すべてのスタイルはCSSで設定し、font要素などをサイト内に使用しないのを推奨します。
コンテンツ、コンテンツ、コンテンツ!
あなたのコンテンツにあわせて、気が狂ったように記述しましょう。
段落にあわせて<p>タグを使用すること継続させることを思い出しましょう。適切な場所にリストを使用しましょう。コピーライトのシンボルには © のコードを使用しましょう。
<br />タグの後に記述しないようしましょう。これはずさんな書き方です。