Semantic Structure and Landmarks

What this is. HTML has elements whose entire job is to say what a region of the page is.

header is introductory content for the page or a section.

nav is a block of navigation links.

main is the primary content, and there is exactly one per page.

article is content that would still make sense lifted out on its own, like a blog post or a project entry.

section is a thematic grouping, and it should have a heading.

aside is related but tangential content.

footer is closing information for the page or a section.

Why not just use div for everything? Because div means nothing. It is the element you reach for when no other element fits, and it is invisible to anyone not looking at the screen.

Swapping div for main, nav and footer produces an identical-looking page, and a completely different experience for someone using a screen reader.

✦ Landmarks are how screen reader users skip

Assistive technology exposes these elements as landmarks, and offers a menu of them. Someone can jump straight to main and bypass your navigation entirely, on every page, without tabbing through twenty links first. A page built from div elements offers no such menu, so they must go through everything in order every single time.

Identical rendering, different meaning

MEANINGLESS

<div class="header">
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="post">...</div>
</div>
<div class="footer">...</div>

SEMANTIC

<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Compare → These two look exactly the same in a browser. Only the right one can be navigated by landmark, understood by a search engine, or read sensibly by a screen reader. The cost of the improvement is zero.

LIVE PREVIEW

loading editor…

Each dashed box is a landmark. A screen reader can list all of them and jump to any one directly.

Your turn → Change every one of these elements to a div with a matching class. The rendering barely changes, and every landmark disappears. That is the entire trade.

When div is still correct. div is not forbidden, it is just meaningless by design. Use it when you need a wrapper purely for layout or styling and no semantic element describes it. A grid container holding three cards is a genuine div. The page's main content area is not.

◈ Graded Build

Rebuild this page skeleton semantically. Replace the meaningless wrappers so the page has a header containing a labeled nav, exactly one main, an article inside it, and a footer. Do not add any CSS.

Checked against the page you actually render, not against how you wrote it. 4 visible and 3 hidden checks.

loading editor…

Mark this lesson complete

Signed in, your progress follows you to every device.

Next: Practice Test →

← Back