Semantic HTML elements do more than describe meaning in the abstract — several of them carry implicit ARIA landmark roles that power one of the most-used screen reader navigation mechanisms. Getting this map right is a distinct, deliberate skill beyond just 'using semantic tags.'
1The Complete Native Landmark Vocabulary
Six HTML elements carry an implicit ARIA landmark role automatically, no manual role attribute required: <header> (banner, at the top level), <nav> (navigation), <main> (main), <aside> (complementary), <footer> (contentinfo, at the top level), and <search> (search, covered in its own dedicated lesson earlier in this course). Together, these six regions are the complete standard vocabulary a screen reader's landmark-navigation feature recognizes and lets users jump directly between.
This is a distinct, deliberate skill from simply 'using semantic elements somewhere on the page' — it requires consciously mapping a page's actual regions (is this genuinely the page's primary navigation? Is this content truly complementary/tangential, or is it actually part of the main content?) to the correct landmark element, the same way a sighted user's eye maps visual regions to their function.
2The Top-Level-Only Rule For header/footer
A subtlety that trips up even experienced developers: <header> and <footer> only carry their banner/contentinfo landmark roles when they're direct top-level children of <body> (not nested inside another sectioning element). A <header> nested inside an <article>, <aside>, <main>, <nav>, or <section> becomes an ordinary, non-landmark sectioning header instead — appropriate, since a page's banner and contentinfo are meant to represent the *page's* single global header and footer, not every individual article's or card's own internal header/footer.
This rule exists precisely to preserve the guarantee that landmark navigation to 'the banner' or 'the contentinfo' takes a user somewhere meaningful and singular, rather than one of potentially dozens of per-component headers scattered throughout a content-heavy page.
3Exactly One <main>, And Labeling Repeated Landmarks
A page should contain exactly one visible <main> element, representing its single, dominant, unique content — this cardinality constraint is what makes <main> a reliable, unambiguous destination both for landmark navigation and for the standard 'Skip to main content' skip-link pattern covered in an earlier lesson. Multiple simultaneous <main> elements (or none at all) break that guarantee.
Unlike <main>, landmarks like <nav>, <aside>, and <search> can legitimately appear multiple times on one page — a primary header navigation plus a separate footer navigation, for instance. When they do, each instance needs a distinct aria-label (or aria-labelledby), or a screen reader user navigating by landmark hears multiple identically-unlabeled regions of the same type with no way to distinguish them before entering one.
4Step-by-Step Breakdown
The Map A Screen Reader User Navigates By. A sighted user's eye instantly recognizes a page's header, main content, and footer just from layout. Landmark roles give screen reader users that exact same instant structural map — but only when every region is deliberately, correctly marked.
Six Elements, Six Implicit Landmark Roles. <header> (banner, only at the page's top level), <nav> (navigation), <main> (main, exactly one per page), <aside> (complementary), <footer> (contentinfo, only at the top level), and <search> (search) each carry an implicit ARIA landmark role automatically — the complete standard landmark vocabulary, no manual role attributes needed.
The Landmark Element Set. Which implicit role does the <aside> element carry?
- →complementary
- →sidebar
- →region
<header>/<footer> Are Only Landmarks At The Top Level. A <header> or <footer> nested inside <article>, <aside>, <main>, <nav>, or <section> does NOT carry the banner/contentinfo landmark role — it becomes a plain sectioning header/footer instead, since a page can only have one genuine top-level banner and one genuine top-level contentinfo region.
Nested header/footer. Does a <header> nested inside an <article> element carry the banner landmark role?
- →No — banner only applies to a header at the page's top level, not nested inside sectioning content
- →Yes, every <header> always carries the banner role regardless of nesting
- →Only if it's inside the very first <article> on the page
Landmark Navigation: A Screen Reader's Jump-Between-Regions Shortcut. Screen readers expose a dedicated keyboard shortcut cycling directly between landmark regions (commonly the D key or a rotor/landmarks list in VoiceOver, a similar dedicated command in NVDA/JAWS) — letting users jump straight to <nav>, then <main>, then <aside>, skipping everything in between entirely, without linear tab-by-tab or read-by-read navigation.
Why Landmarks Matter Practically. What capability does correct landmark markup give a screen reader user that linear tabbing alone doesn't?
- →Jumping directly between named page regions, skipping everything in between
- →A measurably faster page load time
- →Automatic translation of page content
Exactly One <main> Per Page, No Exceptions. A page must have exactly one <main> element representing its dominant, unique content — never more than one visible <main> at a time, since the main landmark's entire purpose is being the single, unambiguous 'skip straight to the actual content' destination.
The <main> Cardinality Rule. How many visible <main> elements should a single page have?
- →Exactly one
- →One per major page section
- →Zero, if it's a single-page application
Multiple Instances Of A Landmark Need Distinct Accessible Names. A page with more than one <nav> (a primary nav and a footer nav, for instance) or more than one <aside> must give each a distinct aria-label (or aria-labelledby), or landmark navigation announces multiple identically-unlabeled regions with no way for the user to distinguish them before entering one.
Labeling Multiple Landmarks. A page has both a primary header <nav> and a separate footer <nav>. What do both need to remain distinguishable via landmark navigation?
- →A distinct aria-label (or aria-labelledby) on each
- →Nothing — multiple instances are automatically distinguished by position
- →They must use different HTML tags entirely, not both <nav>
Landmark Roles Mastered. You now know the complete native landmark vocabulary, why nesting changes header/footer's implicit role, why exactly one <main> is required, and how to correctly label multiple instances of the same landmark type on one page.
Structure The Page With Landmarks. header, main, and footer are implicit ARIA landmarks that structure the whole page.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Landmark Navigation Is One Of The Most Frequently Used Screen Reader Features For Experienced Users
Correct, complete landmark markup has an outsized practical impact relative to its implementation cost — it's largely a matter of using the right native element for each page region, not writing custom code.
2Verify Landmark Structure With Your Screen Reader's Own Landmark List, Not Just Visual Inspection Of The Markup
Testing with an actual landmark-navigation shortcut (or a browser extension's landmark outline) catches nesting mistakes — like an unintentionally non-landmark nested header — that reading the HTML alone can miss.
SEO Implications
- 1
A Clear, Correct Landmark Structure Reinforces A Page's Semantic Outline For Crawlers And AI Systems Alike
Beyond assistive technology, both traditional search engine crawlers and newer AI-based content extraction systems benefit from unambiguous regional structure when determining which part of a page is the genuine primary content versus navigational or supplementary chrome.
Best Practices
Deliberately Map Every Major Page Region To Its Correct Landmark Element During Layout, Not As An Accessibility Afterthought
Retrofitting landmark structure onto an already-built page's <div> soup is far more error-prone than choosing the correct element as each region is originally built.
Always Label Every Repeated Instance Of A Landmark Type With A Distinct aria-label
This is a small, easy addition with an outsized impact on whether landmark navigation is actually usable when a page has more than one nav, aside, or search region.
Frequent Bugs
A component library's card component wraps its title in a <header>, unintentionally creating what a developer assumes is a landmark, inside an <article>.
Recognize that this nested header correctly does NOT carry the banner landmark role — verify actual behavior with a screen reader's landmark list rather than assuming based on the element name alone.
A single-page application renders two different route views' <main> elements simultaneously (one hidden via CSS) rather than only ever rendering one.
Ensure only one <main> element genuinely exists in the DOM (or is exposed to the accessibility tree) at any given time, matching the exactly-one cardinality landmark navigation depends on.
Real-World Examples
A Complete, Correctly-Labeled Landmark Structure
A full page layout using all six landmark elements correctly, including two labeled <nav> instances.
<body>
<header>
<nav aria-label="Primary">…</nav>
</header>
<main>
<search aria-label="Site search">…</search>
<!-- primary page content -->
</main>
<aside aria-label="Related articles">…</aside>
<footer>
<nav aria-label="Footer links">…</nav>
</footer>
</body>