6月 18 2020

【HTML】インデントその③：親と子って何？

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

引き続き、インデントにまつわるつまずきポイントをHTMLを例に解説していきます。
（前回、前々回は、「どこにインデントを入れればいいかわからない」「そもそもインデントとは何か」を説明しました。気になる方は下のリンクから読んでみてください。）

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

インデントシリーズその①

【HTML】インデントその②：インデントってどこにいれるの？

インデントシリーズその②

その①の中で、つまずきポイントは人それぞれあるとお伝えしました。

今回は何が「親」で何が「子」かわからない方に向けての解説です。

HTML要素は基本的に<開始タグ>から始まって</終了タグ>で終わります。
HTMLでの親子関係は要素の中に要素がある時に発生します。

例えば、

<body>
<p>あいうえお</p>
</body>

上記のコードでは、 body要素の<開始タグ>と</終了タグ>の中にp要素が入っていますよね。
これが、要素の中に要素がある状態です。この場合、body要素とp要素は親子の関係と言えます。

例ではbody要素の中にp要素があるので、body要素が「親」、p要素が「子」となります。
そのため<p>あいうえお</p>にはインデントが１つ分必要です。
したがってインデントを入れて書くと、

<body>
  <p>あいうえお</p>
</body>

となります。
それでは以下のコードを見てみましょう。

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

このコードの親子関係は、どの要素から見るかでそれぞれの立場が変わってきます。

body要素から見ると、
p要素とul要素が「子」、 li要素は「孫」となり、

ul要素から見ると、
body要素が「親」、p要素が「兄弟」、li要素が「子」となるわけです。

以上で解説は終わりです。
だんだんインデントへの理解が深まってきたのではないでしょうか。
次の記事ではインデントを入れる時に、半角スペースを何個入れたかがわからなくなってしまう方向けの解説をしていきます。

関連記事