HTMLソースを見やすくしたい！ [ホームページ作成] All About

見やすいソースにしたい

次の2つのHTMLソースを比べてみて下さい。どちらも書かれていることは同じで、果物と野菜の名称を書いた表を作っています。
ソースを見ただけで、どのような表になるのか把握し易いのはどちらでしょうか？

▼ソースA	▼ソースB
<table> <tr><th>果物</th> <th>野菜</th></tr> <tr><td>みかん</td> <td>にんじん</td></tr><tr> <td>りんご</td> <td>なす</td></tr> </table>	<table> <tr> <th>果物</th> <th>野菜</th> </tr> <tr> <td>みかん</td> <td>にんじん</td> </tr> <tr> <td>りんご</td> <td>なす</td> </tr> </table>

どちらのソースが、より内容を把握しやすいか（見やすいか）は言うまでもないでしょう。
どちらも表示すると次のように見えます。（※スタイルシートで表に枠線を付加しています。）

果物	野菜
みかん	にんじん
りんご	なす

単純な表ですね。しかし、ソースAを見ただけでこの表を思い浮かべるのは難しいでしょう。一方、ソースBなら、容易にこの表を思い浮かべることができます。

ちなみに、この表を実現するスタイルシートはこちら。HTMLで作成した表組みに枠線を引いて、表らしく見えるようにしています。

ソースAとソースBでは何が異なるのでしょうか？

ソースAは、改行位置が適切でなく、階層構造に合わせたインデントがされていません。
※インデントとは、行頭に空白を挿入して「字下げ」を行うことです。
ソースBは、HTMLの構造上キリの良い位置で改行し、HTMLの階層に合わせてインデントしています。そうすると、ソースがすっきりして見やすくなる上、HTMLの構造が把握しやすくなります。

見やすくて構造が把握しやすいということは、後から修正する必要が出てきた場合でも、「何が書かれているのか？」を深く考えることなく楽に修正できるようになるということです。