インデント

コード内の行頭をスペースやタブで、ずらすことを指し、主にコードを見やすくするために使用。
インデントを正しく行うことでコードの階層関係が明確になり、エラーやバグの発見や修正が容易になる。
また、インデントはコーディング規約のひとつであり、チーム開発の際にコードの統一性を保つためにも重要な役割を担っている。

基本的なルール

• 1インデントを半角スペース4つ分とする（既存サイトは順次展開）
• 基本的には、ブロック要素はインデントし、インライン要素はインデントしない

ただし、インデントをすることで階層が深くなるため、短い内容の行であれば、ブロック要素であってもインデントをしなくても良い。
厳密的にはHTML5でブロック要素・インライン要素の概念は変わり、コンテンツカテゴリという考えになったが、基本的な考え方、使い方はほぼ同じ。

臨機応変に対応する

<li>の例

ブロック要素ではあるが、インデントしない方が見やすい例
<ul>
    <li>りんご</li>
    <li>ゴリラ</li>
    <li>ラッパ</li>
    <li>パイナップル</li>
</ul>

インデントを加えすぎると長くなってしまう
<ul>
    <li>
        りんご
    </li>
    <li>
        ゴリラ
    </li>
    <li>
        ラッパ
    </li>
    <li>
        パイナップル
    </li>
</ul>

Bootstrapなど、class要素が多くなる場合の例
インデントを加えた方が管理しやすくなる
<ul>
    <li class="class1 class2 class3 class4">
        りんご
    </li>
    <li class="class1 class2 class3">
        ゴリラ
    </li>
    <li class="class1 class2 class3 class4">
        ラッパ
    </li>
    <li class="class1 class2">
        パイナップル
    </li>
</ul>

要素によって長さが変わったりすると可読性が低下する
<ul>
    <li class="class1 class2 class3 class4">りんご</li>
    <li class="class1 class2 class3">ゴリラ</li>
    <li class="class1 class2 class3 class4">ラッパ</li>
    <li class="class1 class2">パイナップル</li>
</ul>

メニューなどで<ul>の入れ子が発生する場合の例
全ての<li>にインデントを加えなくても、可読性は下がりにくい。必要なところだけインデントを加える。
<ul>
    <li>りんご</li>
    <li>
        ゴリラ
        <ul>
            <li>霊長目ヒト科ゴリラ属</li>
            <li>体重オス150 - 180キログラム</li>
            <li>メス80 - 100キログラム</li>
            <li>幼獣は体重1.8キログラム</li>
        </ul>
    </li>
    <li>
        ラッパ
        <ul>
            <li>信号ラッパ</li>
            <li>熊よけラッパ</li>
            <li>行商ラッパ</li>
        </ul>
    </li>
    <li>パイナップル</li>
</ul>

インライン要素<a>の例

<a>タグは元はインライン要素であったが、ブロック要素（フローコンテンツなど）を入れることが出来るようになった。
この場合も中身の要素を考慮して書くことで、可読性を上げることが出来る。

【一般的な使い方】
あい<a href="hoge.html">うえ</a>お

【<div>などを格納する場合 少ない要素】
<a href="hoge.html"><div>あいうえお</div><a>

【<div>などを格納する場合 多い要素】
インデントを加えた方が、何を格納しているのか分かりやすくなる
<a href="hoge.html">
    <div>
        あいうえお<br>
        かきくけこ<br>
        さしすせそ<br>
        たちつてと<br>
        なにぬねの
    </div>
    <div>
        あかさたな<br>
        はまやらわ<br>
        いきしちに
    </div>
<a>

おまけ
<a>タグの格納でやってはいけないこと
親のタグ（この場合は<p>）の中に入れてはいけないタグを<a>タグの中に格納は出来ない。

【✕ <p>タグなどの中に<div>タグが出現するパターン】
<p>
    <a href="hoge.html">
        <div>
            あいうえお<br>
            かきくけこ<br>
            さしすせそ<br>
            たちつてと<br>
            なにぬねの
        </div>
        <div>
            あかさたな<br>
            はまやらわ<br>
            いきしちに
        </div>
    <a>
</p>

【✕　<p>タグなどの中に<p>タグが出現するパターン】
<p>
    <a href="hoge.html">
        <p>
            あいうえお<br>
            かきくけこ<br>
            さしすせそ<br>
            たちつてと<br>
            なにぬねの
        </p>
        <p>
            あかさたな<br>
            はまやらわ<br>
            いきしちに
        </p>
    <a>
</p>

【◯　<span>なら可能】
<p>
    <a href="hoge.html">
        <span>
            あいうえお<br>
            かきくけこ<br>
            さしすせそ<br>
            たちつてと<br>
            なにぬねの
        </span>
        <span>
            あかさたな<br>
            はまやらわ<br>
            いきしちに
        </span>
    <a>
</p>