Frontend Master

JavaScript Curriculum

Semantic HTML
+50 XP

Semantic HTML

easy
~28 min·50 XP

The coffee shop's page works, but it's a wall of divs. A screen reader user can't find the menu, the nav, or the main content. Let's rebuild it with proper semantic structure.

Semantic HTML

HTML5 introduced a set of elements that carry meaning — not just structure. Instead of <div class="header">, you write <header>. The browser, screen readers, and search engines all understand what that element is, not just where it sits on the page.

Why Semantics Matter

ℹ️Three audiences read your HTML
Your HTML is read by: (1) browsers, which use it to build the DOM and apply default styles; (2) assistive technologies like screen readers, which use landmark roles to help users navigate; and (3) search engines, which use heading hierarchy and semantic elements to understand content importance. Divs are invisible to all three.

The Landmark Elements

Every semantic layout element maps to an ARIA landmark role automatically — no aria-role attribute needed:

semantic-layout-builder.html
Click a region

← Click any region in the wireframe to learn about it

Divs vs Semantics: The Real Difference

div-vs-semantic.html
HTML
<div class="header">
  <div class="logo">Coffee Shop</div>
  <div class="nav">
    <div class="nav-link">Menu</div>
    <div class="nav-link">About</div>
  </div>
</div>
<div class="main">
  <div class="post">
    <div class="post-title">Our Story</div>
    <div class="post-body">We started in 2010...</div>
  </div>
</div>
<div class="sidebar">
  <div class="widget">Opening Hours</div>
</div>
<div class="footer">© 2025 Coffee Shop</div>
Accessibility Tree
div.header
div.logo
div.nav
div.nav-link ×2
div.main
div.post
div.post-title
div.post-body
div.sidebar
div.widget
div.footer
No landmarks — screen readers can't navigate
💡Divs still have a job
Don't eliminate divs entirely. Use semantic elements for landmark regions and content structure. Use divs for pure layout containers that carry no meaning — like a CSS grid wrapper or a flex row inside an article. The rule: if there's a semantic element for it, use it. If not, div is fine.

section vs article — The Hardest Call

The most common confusion in semantic HTML is choosing between <section> and <article>. The rule is one question:

Can this content be lifted out of the page and still make sense on its own?

If yes → <article>. If no → <section>.

section-vs-article.html1/4
Scenario

A blog post about brewing methods

💡 Ask yourself: Can this be syndicated independently, like an RSS feed item?
⚠️section needs a heading
Every &lt;section&gt; should have a heading (h2–h6) as its first child. A section without a heading is a signal you might need a div instead. The heading gives the section its accessible name.

Your Challenge

Restructure the coffee shop page with proper semantic landmark elements. Replace every div that has a layout role with the correct semantic element.

Challenge

Restructure the coffee shop page using semantic elements: wrap the logo and nav in a header, put the main content in main, move the opening-hours widget into an aside, wrap each menu section in a section element with a heading, and close with a footer containing the copyright.

headernavmainsectionarticleasidefooterlandmarkaccessibilitysemantic-html
Semantic HTML | Nexus Learn