Element rodzic

Przy zapoznawaniu się z różnymi zagadnieniami języka HTML i nie tylko, przyda się nam wiedza o elemencie rodzicu, elemencie dziecku, elemencie przodku, elemencie potomku oraz o elemencie bracie.

Gdy w zawartości elementu X umieścimy element Y, elementem rodzicem elementu Y staje się element X. Ponadto każdy element HTML może posiadać tylko jednego swojego rodzica.

Przykład:

<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>

Element main w tym przykładzie nie posiada swojego elementu rodzica.

<!-- element "main" nie posiada swojego elementu rodzica -->
<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>

Element article posiada swojego rodzica, którym w tym wypadku jest element main.

<!-- elementem rodzicem elementu "article" jest element "main" -->
<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>

Element h1 posiada swojego rodzica, którym w tym wypadku jest element article.

<!-- elementem rodzicem elementu "h1" jest element "article" -->
<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>

Element p posiada swojego rodzica, którym w tym wypadku jest element article.

<!-- elementem rodzicem elementu "p" jest element "article" -->
<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>

Element b posiada swojego rodzica, którym w tym wypadku jest element p.

<!-- elementem rodzicem elementu "b" jest element "p" -->
<main>
  <article>
    <h1>Mój ulubiony kwiat</h1>
    <p>Moim ulubionym kwiatem jest <b>róża</b>.</p>
  </article>
</main>