HTML文書の記述ルールと作法

タグに全角文字を使わない

テキスト文章とコメント行を除いて全角文字は使用できません。 使用した場合はテキストとして解釈されサイト上に表示されてしまいます。

特に全角スペースが紛れ込んで想定外の挙動を起こすことが多いです。 ソースを記述する際は全角スペースが見えるテキストエディタを使った方がいいでしょう。

記号を表示させる場合は実体参照を使う

一部の記号はそのまま記述しても表示されません。 例えば「<」「>」や「&」などは、そのまま記述しても何も表示されません。 記述するには実体参照を使います。下表は実体参照の一例です。

例えば「<」を表示したい場合、「&lt;」か「<」を代わりに記述します。
「<h1>h1タグは見出しです</h1>」と表示したい場合、HTMLファイルに記述する内容はこうなります。

amp;lt;h1>h1タグは見出しです</h1>

レイアウト調整のために内容にタグや改行を使わない

内容にスペースや改行を入れる事でレイアウトの調節をしている方を見かけますが、HTMLは文書構造の記述言語であるため好ましいことではありません。CSSを使って調整しましょう。

見やすいソースを記述するために心がけること

ソースの体裁を整えて読みやすくするためのコツを書いておきます。具体的には改行・インデント・コメントを有効活用しましょう。

改行を有効活用する

タグとタグの間にある改行は認識されないため、タグの外の改行は好きな位置に入れることができます。タグの前後に改行を入れるなどしてソースを見やすくしましょう。決まったルールはありませんが、基本的にタグの前後に入れるといい感じになります。

下記のように一行に色々書いていると何がどうなっているのか目で追うのが大変です。

lt;article><p>文章文章文章文章文章</p></article>

適切に改行すれば大分見やすくなります。

<article>
<p>文章文章文章文章文章</p>
</article>

要素の階層とインデントを揃える

文書の先頭にタブやスペースを使って下げることをインデントといいます。ソースが複雑になるにつれて見た目の可読性が下がるので、インデントをつけてソースの見た目や分かりやすさを向上しましょう。

body要素の下にarticle要素、article要素の下にh1要素とp要素があります。しかし親子関係がどうなっているかはよく見れば分かりますが直ぐには判断できません。

<article>
<h1>見出し</h1>
<p>段落</p>
</article>

子要素にスペースを２つ入れてインデントを付けました。要素の親子関係が一目で分かります。

  <article>
    <h1>見出し</h1>
    <p>段落</p>
  </article>

コメント行を有効活用する

コメントは画面に表示されず、コンピュータも解釈しません。 メモ書きとして使ったり、古い処理をコメントによって無効化したりします。 処理をコメントで潰すことをコメントアウトといいます。

コメントはコメント部分を「<!−−」と「−−>」で囲って記述します。 コメントは実際の表示には何も影響しませんが、ソースの可読性を上げる事に繋がるので積極的に活用しましょう。

lt;!-- ここはコメントです -->

<!-- 
　このように複数行に分けて
　コメントすることも可能です
-->

<!--=====================================
  このように特定箇所を目立たせることもできます
=========================================-->

HTMLは割とフレキシブルな言語であるため、文法や用途が軽視されがちです。 しかし正しい文法で記述することが保守性や可用性の向上に繋がるので、正しく綺麗なコードを書くよう心がけましょう。