Semantic skeleton
01The four landmarks nearly every page needs. Same visual result as an all-div page — completely different meaning underneath.
<header>Site title, logo</header> <nav>Links to other pages</nav> <main>The page's real content</main> <footer>Copyright, contact info</footer>
Why it matters
02Screen readers jump straight to a named landmark. Search engines understand what the page is about. And CSS gets shorter — nav a selects by role instead of a class on every link.
section vs. article
03article is content that could stand alone — a blog post, a card. section is a themed grouping within the page.
<article> <!-- one blog post --> </article> <section> <!-- e.g. "Reviews" grouping --> </section>
div is still correct
04A wrapper with no semantic meaning of its own — grouped purely for CSS or layout — is exactly what div is for. Don't force a semantic tag where none fits.
<div class="card-grid"> <!-- just a layout wrapper --> </div>
Habits that keep semantics working
05- One
<main>per page — it marks the one primary content region. - Check the Accessibility/landmarks panel in DevTools to see exactly what a screen reader sees.
- Headings still nest by level inside a
<section>or<article>— semantic tags don't replace h1–h6 order.
Div soupA page built entirely from
<div>s has no landmarks — nothing for a screen reader to jump to.Semantic for looksDon't pick
<article> because it "sounds right" — pick it because the content could stand alone.Nested nav
<nav> inside <nav> confuses landmark navigation — one nav per distinct link group.