HTML Landmark Elements

The full set of semantic HTML landmarks, their ARIA roles, and when context changes their meaning.

The full set: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, plus the newer <search>.

Each maps to an implicit ARIA landmark role, which is what makes them meaningful to screen readers and search engines — not just visual styling hooks.

Introductory content for its nearest sectioning ancestor. At the top level of <body> it maps to the banner landmark — the site identity zone. Inside an <article> or <section> it’s just a local header with no landmark role.

A block of navigation links. Maps to the navigation landmark. A page can have multiple — give each a distinct aria-label (aria-label="Primary", aria-label="Breadcrumb") so screen reader users can tell them apart.

<main>

One per page. The dominant content — excludes site chrome (nav, sidebar, footer). Maps to the main landmark. Skip-to-content links target this. Never nest <main> inside another landmark.

<article>

Self-contained, independently distributable content. A blog post, a comment, a card, a widget — anything that would make sense pulled out of context and published elsewhere. Maps to the article role. Can nest: comments inside a post are valid nested <article> elements.

<section>

A thematic grouping within a document. Only gets a landmark role (region) when given an accessible name via aria-labelledby or aria-label. Without a name it’s an anonymous grouping — semantically inert, like a smarter <div>.

<aside>

Content tangentially related to the surrounding content. Sidebar, pull quote, callout, related links. Maps to the complementary landmark. The relationship is adjacent, not nested — an <aside> inside an <article> is tangential to that article, not the whole page.

Closing content for its nearest sectioning ancestor. At the body level it maps to the contentinfo landmark — copyright, legal, site-wide links. Inside an <article> it’s a local footer (author, date, tags) with no landmark role.

Added in the WHATWG HTML living standard in 2023. Maps to the search landmark. Previously you had to write <form role="search">. Use it to wrap any search form or filtering UI.

The landmark map

body
├── <header>          → banner
├── <nav>             → navigation
├── <main>            → main
│   ├── <article>     → article
│   │   ├── <header>  → (no landmark — local)
│   │   ├── <section> → region (only if named)
│   │   └── <footer>  → (no landmark — local)
│   └── <aside>       → complementary
├── <search>          → search
└── <footer>          → contentinfo

The contextual rule is consistent: <header> and <footer> carry landmark roles only when they are direct children of <body>. Inside <article> or <section> they lose the landmark and become purely structural.