6月 16 2020

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

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

前回に引き続き、プログラミング初心者がつまずきやすいインデントについてHTMLを例に解説していきます。
（前回は「そもそもインデントとは何なのか」を説明しました。気になる方は下のリンクから読んでみてください。）

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

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

↑の記事の中で、インデントにまつわるつまずきポイントは人それぞれあるとお伝えしました。

今回はどこにインデントを入れればいいかわからない方に向けての解説です。

HTMLにおいて、インデントを入れるべき場所はどこか。
それは要素の中に要素を入れている場所です。

つまりどういうことかというと、ある要素Aの<開始タグ>と</終了タグ>の中に別の要素Bを書く時、Bの要素の<開始タグ>の前にインデントを入れます。

実際にコードを見ていきましょう。

body要素があります。

<body>
</body>

このbody要素の中にp要素を入れます。

<body>
<p>こんにちは</p>
</body>

この状態が要素の中に要素を入れている状態です。
この時、中にある要素pの<開始タグ>の前にインデントを入れる必要があるということです。

<body>
  <p>こんにちは</p>
</body>

上記の例の様にp要素の前にインデントを入れてあげればOKです。
あとはこの繰り返しで、要素の中にある要素、さらにその中にある要素……と、階層が深くなれば深くなる毎にインデントも深くなっていきます。

以上、インデントを入れる場所についてでした。
次回は要素の親と子について解説していきます。

関連記事