HTMLを見やすく整えよう
HTMLを書いていくと、要素がどんどんと入れ子に状になって更新したい箇所がわかりにくくなってしまいます。
なんとか見つけて編集できても、不用意にHTMLタグを消してしまって、Webページがきちんと表示されない。なんてことも・・・
例えば以下の図を見てみてください。
・・・読みにくい！
もしも私がこのページを更新しようとするなら、まずHTMLを整えるところから始めます。
読みにくい、更新箇所を探しにくいHTMLは間違いや事故の元になってしまい、良いことがありません。
ですので、作り始めの段階で改行やインデント・コメントを活用して見やすいHTMLにしましょう。
先ほどの図を改行とインデントで整えたものがこちらです。
HTMLがどう入れ子になっているのかが分かりやすくなっています。
HTMLでは、タグとタグの間の改行や、半角スペース・タブは無視されます。
ですのでブラウザでのWebページの見え方には問題はありません。
改行やインデントを使って、見やすいHTMLになるように心がけましょう。
主に開始タグ・終了タグの前で改行を入れると読みやすくなりますよ。
インデントについて（字下げ）
インデント（字下げ）は、半角スペースとタブのどちらを使っても大丈夫。
タブ1個で半角スペース8つ分がインデントされるのが一般的です。
テキストエディタによってはタブ1個あたりのインデント文字数を自由に設定できるものもあります。
※全角スペースはページ上にも表示される恐れがあるので、注意です。
コメントについて
コメントは、Webページ上には表示されません。HTMLに制作者のコメントとして文字を残すことができます。
半角の「<!–」と「–>」で囲むことでコメントにすることができます。
何行入れても大丈夫ですので活用しましょう。
ただしコメント（<!–と–>）の中に「<」や「>」「<-」「->」を入れないように注意してください。
必ず「<!–と–>」で1セットとなる様に書くことがポイントです。
まとめ
・HTMLを綺麗に整えることで、間違いや読みにくさを減らせる
・開始タグや終了タグで改行すると見やすい
・インデント（字下げ）を行うとさらに見やすくなる
・タグとタグの間の改行や半角スペース、タブはホームページ上には表示されない
・半角の「<!–」と「–>」で囲んだ箇所はコメントとなり、ホームページ上には表示されない
