AniUI Academy

Semantic HTML

header, nav, main, article, section, aside and footer — the elements that expose real landmark roles to assistive technology, and when div and span are still the right choice.

9 min read

Every element you've learned so far had one clear job — a paragraph, a list, a link. This lesson covers a set of elements whose job is structural: they describe the regions of a page — its header, its navigation, its main content — rather than a specific piece of text. Using them correctly has a concrete, measurable payoff for accessibility, not just tidier markup.

The landmark elements

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

Each of these describes a region of the page rather than a specific bit of text. You could build the exact same visual layout entirely out of <div> elements with classes — nothing stops you — but you'd lose something real in the process.

The accessibility mapping that makes this concrete

This isn't a style preference — it's a verifiable technical fact. Several of these elements automatically expose an implicit ARIA landmark role to assistive technology:

  • <nav> exposes a navigation landmark
  • <main> exposes a main landmark
  • A top-level <footer> (a direct child of <body>, not nested inside an <article> or <section>) exposes a contentinfo landmark
  • A top-level <header> similarly exposes a banner landmark
  • <aside> exposes a complementary landmark

Screen readers provide a dedicated way to navigate a page by jumping directly between its landmarks — skip straight to the main content, skip straight to navigation — the same way sighted users can visually scan a page layout and jump straight to the part they want. A page built entirely from <div> elements has no landmarks at all, no matter how it's visually laid out. That navigation shortcut simply doesn't exist for it.

You get this for free, with zero extra code, purely by choosing the right element name. That's a rare deal in engineering.

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<header> typically holds introductory content for whatever it's inside — at the top level, that's often a site title and primary navigation. It isn't only for the very top of the page, though: an <article> can have its own <header> containing that article's title and byline.

<footer>
  <p>&copy; 2026 My Blog. All rights reserved.</p>
</footer>

<footer> works the same way — a top-level one is the page's footer, but an <article> can have its own <footer> for things like publish date or author bio.

<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/contact">Contact</a>
</nav>

Wrap groups of navigation links in <nav> — but not every group of links on a page needs one. A handful of links inline in a paragraph, or a small list of related-article links at the bottom of a post, doesn't need <nav>. Reserve it for genuine navigation blocks: primary site nav, a table of contents, pagination controls.

<main>

<main>
  <h1>Welcome</h1>
  <p>This is the primary content of the page.</p>
</main>

<main> wraps the primary content of the page — the content that's unique to this page, as opposed to things repeated across every page like the header and navigation. There should be exactly one visible <main> per page.

<article> vs <section>

These two get confused constantly, and the distinction is genuinely useful once it clicks:

  • <article> is for content that is self-contained — it would still make complete sense if you pulled it out and dropped it somewhere else entirely: a blog post syndicated to another site, a single product card in a grid, a forum comment, a news story.
  • <section> is for a thematic grouping that's part of a larger whole and doesn't necessarily make sense pulled out on its own — usually introduced by its own heading. A "Features" section of a marketing page, a chapter within a long document.
<article>
  <h2>How CSS Grid Works</h2>
  <p>...</p>
</article>
 
<section>
  <h2>Related Reading</h2>
  <ul>
    <li><a href="#">Flexbox Basics</a></li>
    <li><a href="#">The Box Model</a></li>
  </ul>
</section>

An <article> can contain <section> elements inside it (a long article broken into thematic sections), and a page can have multiple <article> elements (a blog listing page showing several posts). The test worth applying each time: "if I copied just this block onto a completely different page, would it still stand on its own and make sense?" If yes, <article>. If it only makes sense as one part of the surrounding page, <section>.

<aside>

<aside>
  <h2>About the Author</h2>
  <p>Jane writes about frontend development.</p>
</aside>

<aside> marks content that's tangentially related to the surrounding content but not central to it — a sidebar, a pull quote, a related-links box, an author bio. Content a reader could skip entirely without losing the main thread.

<div> and <span> — the honest non-semantic fallback

<div class="card">
  <span class="badge">New</span>
  <p>Some content.</p>
</div>

<div> and <span> carry no meaning at all — that's not a limitation, it's the point. When you need an element purely to group things for styling or layout, and there is genuinely no semantic role being expressed, <div> (block-level) and <span> (inline) are the correct, honest choice. Reaching for <section> or <article> just because you need some wrapper, when there's no real thematic grouping happening, is worse than just using a <div> — it misrepresents the page's structure to assistive technology without adding anything true.

Try it yourself

Try it yourself
Loading playground...

What to remember

  • <nav>, <main>, a top-level <header>/<footer>, and <aside> expose real ARIA landmark roles that screen readers can jump between directly.
  • <article> is for self-contained content that would make sense on its own elsewhere; <section> is a thematic grouping within a larger document.
  • There should be exactly one <main> per page.
  • <div> and <span> are still correct when there's genuinely no meaning to express — don't force a semantic element where none fits.

Check yourself

3 questions · pass 3/3 to unlock Tables

up to 50

  1. 1.What concrete, verifiable benefit do elements like <nav> and <main> have over <div> for accessibility?

  2. 2.You're marking up a single blog post that could be copied to another site and would still make complete sense on its own. Which element fits best?

  3. 3.When should you reach for <div> or <span> instead of a semantic element?

3 left to answer