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

HTMLの『要素の関係性』について解説します。

要素の関係性

HTMLにおける要素は要素同士の関係性があります。

関係性はHTMLと合わせて利用するCSSやJavaScriptの理解や検索エンジン対策に重要です。

関係性の種類

関係性の種類は主に親要素、子要素、兄弟要素、祖先要素、孫要素の５つです。

次のサンプルコードで各関係性について確認します。

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

親要素

親要素は要素Xを内包する要素Yです。

サンプルでは『Bの親要素はA』、『Cの親要素はB』、『Dの親要素はB』になります。

子要素

子要素は要素Xの直下に内包する要素Yです。

サンプルでは『Aの子要素はB』、『Bの子要素はCとD』になります。

兄弟要素

兄弟要素は要素Xと同じ階層にある要素Yです。

サンプルでは『Cの兄弟要素はD』、『Dの兄弟要素はC』になります。

祖先要素

祖先要素は要素Xの親要素よりも上の階層の要素Yです。

サンプルでは『Cの祖先要素はA』、『Dの祖先要素はA』にります。

孫要素

孫要素は要素Xの子要素が内包する全ての要素Yです。

サンプルでは『Aの孫要素はCとD』になります。