Semantic layout

Replacing div soup with header, nav, main, article, aside and footer — and why it matters beyond tidiness.

Why semantics pay off

Landmark elements describe roles: navigation, main content, complementary aside. Screen readers offer shortcuts to jump between them; search engines get a clearer picture of what matters on the page; and future maintainers can read your intent.

💡

Use the element that matches the meaning first, then style it. A CSS class on a div can never give a screen reader the same information.

The page skeleton

<header>
  <nav aria-label="Primary">…links…</nav>
</header>
<main>
  <article>
    <h1>Article title</h1>
    <p>Body copy…</p>
  </article>
  <aside>Related links</aside>
</main>
<footer>© 2026</footer>

Element	Role
`header`	Introductory content for the page or a section
`nav`	Major navigation blocks (label multiple ones with `aria-label`)
`main`	The page's primary content — exactly one per page
`article`	Self-contained content that could be syndicated
`section`	Thematic grouping, normally with a heading
`aside`	Tangential content such as sidebars
`footer`	Closing content, metadata

When div and span are fine

div and span carry no meaning, which makes them the right choice for purely presentational grouping — grid containers, wrappers, hooks for JavaScript. The rule is not "never use divs" but "use a meaningful element when one fits".

⚠️

A clickable div is not a button: it has no keyboard focus, no role, and no Enter/Space activation. Use <button> and style it.

FAQ

section vs article?

An article makes sense on its own (a blog post, a comment); a section is a chunk of a larger whole. When in doubt, ask whether it would make sense in a feed.

Do I still need ARIA roles?

Usually not. Native HTML elements already have the right roles; add ARIA only when you build custom widgets that HTML cannot express.

HTML: getting started Elements and attributes

Last refreshed 2026-09-17.