タグを記述する際のコツ
タグを書くときにミスを防いだり、ネスト構造で頭が混乱しないようにするためのコツを紹介します。
インデントさせる
ブラウザにHTMLファイルを表示させる際、本文となるテキスト以外の部分にはタブ、スペース、改行をいくら入れてもブラウザの表示には影響を与えません。
タグで定義で空行や改行が無視されたことを思い出してください。タグで何かを指定しないと、ブラウザは空行や改行をして表示しません。
なので、行頭にタブを挿入して、ネストの状態を分かりやすくしましょう。これをインデントするといいます。
indent.html
<html>
<head>
</head>
<body>
<p>はじめてのウェブページ。
</p>
<p>うまく表示されるかな。
</p>
</body>
</html>
行頭のタブはブラウザの表示に影響を与えないことを確認してください。
尚、上の例では<p>の終了タグである</p>を改行した行に記述しています。<p>タグを使用すると、通常、ブラウザは改行して1行分の空行を設けて表示するので、このように改行している様子（雰囲気）を出して分かりやすくするという方法もよく使われます。
テキストエディタには自動インデントの機能を持ったものもありますので、そういったものを活用してみるのも良いと思います。
要素同士を意識しておく
前ページで要素同士の交差についてブロックや箱として考えることを紹介しました。インデントすると同時に、色分けするようにブロックとして考え、要素同士を意識しておくことができれば、楽にタグを記述していけると思います。
<html>
<head>
</head>
<body>
<p>はじめてのウェブページ。
</p>
<p>うまく表示されるかな。
</p>
</body>
</html>
コメントの活用
コメントを活用することでも、HTML、XHTML文書を作成する際に混乱やミスを防ぐことができます。「<!--」と「-->」に囲まれたテキストはブラウザには表示されません。通常、この中に説明等のコメントを記述します。
<html>
<head>
</head>
<body>
<!--ここから本文-->
<p>はじめてのウェブページ。
</p>
<p>うまく表示されるかな。
</p>
<!--本文ここまで-->
<!--コメントは
複
数
行
になってもOK-->
<!--************************************************
* このようにすれば、コメントを目立たせることができるので、
* 重要なコメントを書くとよいでしょう。
*************************************************-->
</body>
</html>
確認ページを開いて、ブラウザで確認してください。コメント部分は表示されません。
コメントの中には2つ以上「-」（ハイフン）を入れてはいけません。また、コメントはネスト（入れ子に）してはいけません。
将来、編集するかもしれません
今、作成しているWebページを何ヶ月後か、何年後に編集することがあるかもしれません。もし、インデントもコメントもないファイルを将来編集することになったら、たとえ自分が書いたものであっても、かなり面倒な作業になることは想像できると思います。
インデントの仕方や、コメントの付け方は自由ですが、自分なりの一貫したルールを通すことと、他人が見ても分かりやすい構造にすることを意識してみてださい。それが結果的に自分にとって最も分かりやすい構造になっているはずです。
他のサイトを参考にしてみましょう
ブラウザのメニューから「表示 > ページのソース」で、ソース（タグを記述したHTMLファイルそのものの内容）をブラウザから確認することもできます。サイトを見て回る時に、どのようにインデントやコメントを使用しているかを見てみるのも参考になると思います。（このサイトのソースは参考になりませんが・・・）
まとめ
- ネストの状況が分かるようにインデントする
- 要素を1つのブロックのように考える
- <!--と-->でコメントを定義
- 将来、編集するかもしれないということを意識する
- 自分なりのもので良いから1つのルールを通す
- ブラウザから、ソースを確認することができる
タグ記述のコツ
タグ記述のルール
ページの先頭
2010 Webデザインレッスン