6月 05 2020

【HTML】インデントその①：そもそも、インデントって何？

皆さんこんにちは！
プログラミング初心者さんがつまずきやすいポイントを丁寧に解説、解消していく「初心者つまずき解消ブログ」です。

この回からは何回かに分けて、プログラミング初心者がつまずきやすいインデントについてHTMLを参考に解説していきます。

HTMLのレビューをしていると、プログラミング初心者はインデントでつまずくことが多いことに気付きます。そして厄介なのが、その理由は人それぞれだということです。

など・・・。
第１回目の今回は、そもそもインデントが何なのかわからない方に向けての解説です。

インデントとは文の行頭に空白を入れ、先頭の文字を右に押しやることです。
具体例を見てみましょう。

<body>
<p>あいうえお</p>
<ul>
<li>リストA</li>
<li>リストB</li>
</ul>
</body>

このコードにインデントを入れると、

<body>
  <p>あいうえお</p>
  <ul>
    <li>リストA</li>
    <li>リストB</li>　
  </ul>
</body>

となり、「どの要素の中にどの要素があるか」というのが視覚的にわかりやすくなります。

インデントは和訳すると、「へこませる」「ギザギザをつける」の様な意味になりますが、プログラミングの世界だと「字下げ」や「見栄えを整える」ことを言います。大体は同じ意味ですね。

見栄えを良くすることで修正がしやすかったり、第三者がコードを見た時に理解しやすくなったりするわけです。そのため開発効率も上がります。このことからインデントはプログラマーの必修科目とされています。

読みやすいコードはインデントから！
プログラミング初心者さんはまずはインデントをマスターしましょう。
次回はインデントを入れる場所について解説していきます。

関連記事