Page structure
Div, span, and nesting
Use generic containers when no semantic element fits, and keep the document tree valid by closing and nesting elements carefully.
div and span are generic containers. They carry no meaning of their own. Use them when no semantic element fits the job.
Use div to group a block of content:
<div class="route-summary">
<p>Distance: 8 km</p>
<p>Difficulty: easy</p>
</div>Use span around a small piece of phrasing content inside a paragraph or heading:
<p>Difficulty: <span class="rating">easy</span></p>There is nothing wrong with these elements. The problem is reaching for them when a semantic element 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 crosses tags incorrectly:
<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. A p element cannot contain a div.
Browsers try to repair invalid nesting. The resulting DOM may differ from the source you wrote. That leads to confusing CSS, broken JavaScript selectors, and accessibility tree surprises. Write valid nesting in your HTML file instead of relying on the browser to guess your intent.
When something on the page looks wrong, inspect the DOM in DevTools before adding more markup. The tree the browser built is often the first clue.
On your my-page project, wrap a group of related paragraphs in a div only when no section or article fits. Then deliberately cross two tags in a copy of the file, reload, and compare the DOM to your source. That one experiment makes nesting rules stick faster than memorizing them.
When the DOM shows a p that you never wrote, assume nesting repair happened and fix the source file.
Quick check
Result
You got of right.
Lesson completed