Parent, child, and sibling elements

Let's go to our HTML and take a peek at this nicely nested HTML code in the secondary-section. So basically, what we have here is a section tag and three div tags that are inside of that section:

<section>
  <div>
    <figure>
      <img src="images/octopus-icon.png" alt="Octopus">
    </figure>
    <h2 class="column-title">The Octopus</h2>
    <p>Lorem ipsum dolor...</p>
    <a href="#" class="button">Tenticals</a>
  </div>
  <div>
    <figure>
      <img src="images/crab-icon.png" alt="Crab">
    </figure>
    <h2 class="column-title">The Crab</h2>
    <p>Lorem ipsum dolor...</p>
    <a href="#" class="button">Crabby</a>
  </div>
  <div>
    <figure>
      <img src="images/whale-icon.png" alt="Whale">
    </figure>
    <h2 class="column-title">The Whale</h2>
    <p>Lorem ipsum dolor...</p>
    <a href="#" class="button">Stuart</a>
  </div>
</section>

So <div> is the child element of <section>, while <section> is the parent. In other words, <div> is the descendant of <section>, <section> is the ancestor of <div>. <figure> is also a descendant of <section>, and <img> is a descendant of <section>. Note that <figure>, <h2>, and <p> are on the same level of the HTML so they are siblings, and they are also all descendants of <section>. That's as complicated as it gets; there are no uncles, no aunts, and no third cousins.