Div, span, and nesting

div and span are generic containers. They do not describe a specific kind of content.

Use div to group a block of content when no semantic element fits:

<div class="route-summary">
  <p>Distance: 8 km</p>
  <p>Difficulty: easy</p>
</div>

Use span around a small piece of phrasing content:

<p>Difficulty: <span class="rating">easy</span></p>

There is nothing wrong with these elements. The problem is using them when an element with useful meaning already exists. Prefer button for an action, nav for major navigation, and p for a paragraph.

HTML elements form a tree. Close inner elements before outer ones:

<p>This is <strong>very important</strong>.</p>

This is incorrectly crossed:

<p>This is <strong>incorrect.</p></strong>

Some combinations are invalid even when the tags look balanced. You cannot nest a link inside another link, and a paragraph cannot contain a div.

Browsers try to repair invalid nesting. The resulting document tree may differ from the source you wrote, which can cause confusing CSS, JavaScript, and accessibility problems.

Quick check

Result

You got of right.

Try again