要素の階層構造

要素の階層構造とは

HTMLは要素同士が親子関係を作り階層構造を形成します。要素間の関係を正しく表現することは、文書構造にとっても装飾にとっても重要です。

要素は互いの位置関係により、要素関係を以下のように表現します。

一つ外側の要素を「親要素」といいます。
下のコードのp要素から見てarticle要素は親要素になります。
逆にarticle要素から見たp要素は子要素になります。

lt;section>
  <article>
    <h1>見出し</h1>
    <p>文章</p>
  </article>
</section>

同列の要素を「兄弟要素」といいます。
下のコードのh1要素とp要素は兄弟要素です。

lt;section>
  <article>
    <h1>見出し</h1>
    <p>文章</p>
  </article>
</section>

外側の要素を「先祖要素」、内側の要素を「子孫要素」といいます。
下のコードのh1要素から見たarticle要素とsection要素はどちらも先祖要素です。
逆にsection要素から見たarticle要素とh1要素はどちらも子孫要素です。

lt;section>
  <article>
    <h1>見出し</h1>
    <p>文章</p>
  </article>
</section>

HTMLでは要素同士が階層構造を形成します。階層構造は文書構造を形成する上で重要な概念です。例えば下の記述はこれが見出しと段落である事は分かりますが、それ以上は分かりません。

lt;h1>見出し</h1>
<p>段落</p>

article要素の子要素なら、記事の見出しと段落であることが分かります。

lt;article>
  <h1>記事の見出し</h1>
  <p>記事の段落</p>
</article>

aside要素の子要素なら、サイドバー的なものの見出しと段落であることが分かります。

lt;aside>
  <h1>サイドバーの見出し</h1>
  <p>サイドバーの段落</p>
</aside>

このように要素同士が階層構造を取ることで、より具体的に要素の役割を示すことができるのです。また要素の関係はCSSの適用先としても使えます。「article要素内のh1要素のみにスタイルを適用」といった指定ができるので、装飾においても重要な概念なのです。

要素同士は外または中に記述するか、並べるかしかできません。下のarticle要素とp要素のような表現しにくい妙な関係（入れ食い？）にするのはNGです。

誤ったコード

lt;article>
  <h1>見出し</h1>
<p>テキスト
</article>
</p>

正しいコード

lt;article>
  <h1>見出し</h1>
  <p>テキスト</p>
</article>

要素の種類ごとに親・子要素にできる要素の種類が決まっています。例えばp要素の中にp要素やarticle要素やh1要素などを入れる事はできません。正しい文書構造を実現するために、要素に対して親・子にできる要素のルールが設定されているのです。

下の例は「駄目」の部分だけ赤くしようとした例です。
しかしp要素の中にp要素を入れることはできないため間違いです。

誤ったコード

lt;article>
  <p>この例は<p class="red">駄目</p>な例です。</p>
</article>

正しくはspan要素内で部分的に色を変えます。

正しいコード

lt;article>
  <p>この例は<span class="red">良い</span>な例です。</p>
</article>