改行とインデントで見やすくしてみる
それでは、先ほどのソースAに改行とインデントを加えて、見やすいソースにしてみましょう。
STEP.1◆改行を加える
まずは、HTMLの構造上、キリの良い位置で改行してみます。
<table> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>みかん</td> <td>にんじん</td> </tr> <tr> <td>りんご</td> <td>なす</td> </tr> </table>
少しすっきりしましたね。 しかし、これではまだ階層構造がどうなっているのか、イマイチ把握できません。
STEP.2◆インデントを加える
そこで、階層構造に合わせてインデントをしてみましょう。
<table> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>みかん</td> <td>にんじん</td> </tr> <tr> <td>りんご</td> <td>なす</td> </tr> </table>
これはまさに、ソースBですね。 階層構造がしっかり表現できたソースになりました。これなら、ソースを見るだけで、だいたいの表示が想像できるでしょう。
なお、もっと厳密に階層を表現するなら、次のようにも書けるでしょう。
<table> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>みかん</td> <td>にんじん</td> </tr> <tr> <td>りんご</td> <td>なす</td> </tr> </table>
※table要素は、表組みの最初と最後に1度しか出てきませんので、table要素の直下の要素（tr要素）はインデントしなくても見にくくはならないと考え、ソースBではインデントしませんでした。 あまり厳密に階層をインデントで表すと、ソースがスカスカになったり縦に長くなったりして、全体が見渡しにくくなる可能性もあります。 その辺は、ソースの長さや本文の混み具合などから臨機応変に考えれば良いでしょう。
適切な改行とインデントで見やすく！
HTMLは、あとから修正する必要が出てくることもよくあります。 「このソースは一体何を記述しているのか？」と頭を悩まさなくても済むように、 普段から、読みやすくて分かりやすいソースを書くよう心がけておくと良いでしょう。
インデントは、半角スペースを数個入れても構いませんが、[TAB]キーを使ってタブを挿入する方が楽です。 また、タブの方が（半角スペースを何個も入れるより）ファイルサイズが少なくて済みます。
