Nesting and the Document Tree

HTML documents are trees. An element that contains another element is its parent; the contained element is a child. Elements that share the same parent are siblings.

<article>
  <h2>Choosing a laptop</h2>
  <p>Start with the work you need to do.</p>
  <ul>
    <li>Check memory requirements.</li>
    <li>Compare battery life.</li>
  </ul>
</article>

The article is the parent of the heading, paragraph, and list. The two list items are siblings inside the list. This structure is visible in the browser’s Elements panel.

Close elements in the reverse order in which they were opened:

<!-- Incorrect -->
<p>Read <strong>the important part.</p></strong>

<!-- Correct -->
<p>Read <strong>the important part.</strong></p>

Think of nested elements as boxes: the last box opened should be the first one closed. Browsers attempt to recover from malformed markup, but the repaired DOM may not match what you intended. A paragraph, for example, cannot contain another paragraph.

Build an article with a heading, two paragraphs, and a list. Inspect the resulting tree and confirm that each element is nested where you expect.