【HTML】要素の関係性 - 親子孫関係・兄弟関係

HTML要素の関係性についてご紹介します。

関係性

HTMLの要素において、要素間の関係性を理解することは重要です。
検索エンジン対策やHTMLと合わせて利用するCSSやJavaScriptの理解に必要な知識となります。

種類

要素の関係性は主に５種類あります。
次のサンプルコードを例に見ていきましょう。

<A>
    <B>
        <C></C>
        <D></D>
    </B>
</A>

親要素

ある要素を内包している要素を親要素と呼びます。
サンプルコードでは『Bの親要素はA』、『Cの親要素はB』、『Dの親要素はB』になります。

子要素

ある要素が内包しているかつ直下の要素を子要素と呼びます。
サンプルコードでは『Aの子要素はB』、『Bの子要素はCとD』になります。

兄弟要素

ある要素と同階層にある要素を兄弟要素と呼びます。
サンプルコードでは『Cの兄弟要素はD』、『Dの兄弟要素はC』になります。

祖先要素

ある要素の親要素よりも上の要素を祖先要素と呼びます。
サンプルコードでは『Cの祖先要素はA』、『Dの祖先要素はA』になります。

孫要素

ある要素が内包している子要素以外の要素を孫要素と呼びます。
サンプルコードでは『Aの孫要素はCとD』になります。