親要素、子要素、インデント

HTML要素には、「階層」というものがあり、親と呼ばれる要素が、子と呼ばれる関係にある要素を包容する構成が必ず存在します。

イメージするとすれば、カテゴリーとそれに該当するコンテンツの関係性がそれに該当するでしょう。
それぞれのカテゴリー名の中に、各コンテンツが包容されていますね。

これをHTML要素の親要素と子要素に置き換えて図にして見ると、以下のようにイメージできます。

親子関係を表す階層の違いは、文章を書くときの段落のようなスペースによって視覚的にわかるようになっていることがわかりますね。

この段落のようなスペースのことを、「インデント」と言います。

「マークアップ言語シリーズ: Lesson 0 Visual Studio Codeを導入してみよう」の本にある、「インストールの仕方」の項目で、少し説明がありましたね。

インデントは、Tabキーを使って打ち込むことができます。
半角英数字のスペース2つ分でも、Tabキー1回分の代用ができますが、本書ではTabキーを使いましょう。

理由としては、スペースの場合、1つインデントをあけるために、2回スペースキーを押さなければならないため、押し忘れてスペースが1つになる可能性があります。

特に目立ったエラーには直結しませんが、プログラミング言語を書く時には、常にコードの読みやすさというものを意識することが重要視されています。

インデントの役割は、要素間の親子関係の階層を視覚的に見やすくするためのものです。

そのインデントが統一性がなく、ここはスペース1つ分だけれども、こちらはスペース2つ分と、バラバラしていると、大きなプロジェクトになる程コードが読み辛くなります。

Tabキーにすることで、インデントを1つ開けたい時にTabキーを1回押せば良いだけなので、インデントの統一を崩してしまうリスクを減らせるのです。

読みやすいコード（リーダブルコードと言います）を常日頃からどの言語でも心がけていきましょう。