見やすいソースにしたい

次の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の構造が把握しやすくなります。

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

改行とインデントで見やすくしてみる

それでは、先ほどのソースAに改行とインデントを加えて、見やすいソースにしてみましょう。

それでは、次のページへ! →