きれいなHTMLを記述するポイント

『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要素などをサイト内に使用しないのを推奨します。

コンテンツ、コンテンツ、コンテンツ！

あなたのコンテンツにあわせて、気が狂ったように記述しましょう。
段落にあわせて

No related posts.