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

コンテンツ、コンテンツ、コンテンツ!

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

段落にあわせて<p>タグを使用すること継続させることを思い出しましょう。適切な場所にリストを使用しましょう。コピーライトのシンボルには &copy; のコードを使用しましょう。

<br />タグの後に記述しないようしましょう。これはずさんな書き方です。

Pocket
LINEで送る

1件のコメント

  1. htmlとCSSを記述する場合・まずは、W3Cの仕様書を熟読することをお勧めします。タグの意味づけを正しく理解されてないと、Validな記述はできません!ちなみにhead要素の記述にも、意味があることを理解してください!文字の大きさを表すタグではないことを知ってください!

コメントは停止中です。