What Are HTML5 Landmarks? Complete Guide (2026)
Hi, I'm Saar - a software engineer, SEO specialist, and lecturer who loves building tools and teaching tech.
View author profile →What Are HTML5 Landmarks?
HTML5 landmarks are semantic elements — <header>, <nav>, <main>, <aside>, <footer>, <section>, and <article> — that carry implicit ARIA roles for assistive technology. Screen readers like NVDA, JAWS, and VoiceOver let users jump directly between landmarks (in NVDA, press the D key) instead of reading the page top to bottom. Using a <div> in place of these elements removes that capability.
Key Facts (TL;DR)
- Implicit roles: <main> → main, <nav> → navigation, <header> → banner (top level), <footer> → contentinfo (top level), <aside> → complementary.
- One main per page: Exactly one <main> element. Multiple <main> elements is a WCAG and HTML spec violation.
- Screen reader shortcut: NVDA uses the D key to jump between landmarks; JAWS uses R; VoiceOver uses VO+U.
- Multiple of same kind: Two <nav> elements need aria-label to distinguish them (e.g., "Main" and "Footer").
- section gotcha: <section> only gets a region role when given an accessible name (aria-label or aria-labelledby).
- WCAG: Landmarks satisfy 1.3.1 Info and Relationships and 2.4.1 Bypass Blocks.
Landmark Reference Table
| Element | Implicit ARIA role | When to use |
|---|---|---|
| <header> | banner (only at top level of body) | Site-wide header: logo, primary nav, search |
| <nav> | navigation | Primary nav, breadcrumbs, footer link lists |
| <main> | main | Primary unique content of the page (exactly one) |
| <aside> | complementary | Sidebar, related links, callouts not essential to main flow |
| <footer> | contentinfo (only at top level of body) | Site footer: copyright, legal links, contact |
| <section> | region (only when named via aria-label/labelledby) | Distinct sections that need to be addressable as landmarks |
| <article> | article | Self-contained piece: blog post, news article, comment |
Complete Page Skeleton
A correctly structured page uses each landmark once at the top level, with aria-label disambiguating any duplicates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<header>
<a href="/" aria-label="Home">Logo</a>
<nav aria-label="Main">
<ul>
<li><a href="/products">Products</a></li>
<li><a href="/pricing">Pricing</a></li>
</ul>
</nav>
</header>
<main>
<h1>Page Title</h1>
<article>
<p>Primary content...</p>
</article>
</main>
<aside aria-label="Related articles">
<h2>Related</h2>
<ul><li><a href="/a">Article A</a></li></ul>
</aside>
<footer>
<nav aria-label="Footer">
<ul>
<li><a href="/privacy">Privacy</a></li>
<li><a href="/terms">Terms</a></li>
</ul>
</nav>
<p>© 2026 Company</p>
</footer>
</body>
</html>How to Implement Landmarks
- Wrap site-wide chrome (logo, primary nav) in <header> as a direct child of <body>.
- Put every navigation menu in <nav>. If there is more than one on the page, give each an aria-label.
- Wrap the unique page content in exactly one <main>.
- Use <aside> for sidebars and tangentially related content.
- Wrap site footer in <footer> as a direct child of <body>.
- Use <article> for self-contained content like a blog post.
- Only use <section> as a landmark when you give it an accessible name with aria-label or aria-labelledby.
Common Mistakes
- Wrapping the whole page in <div class="container">: A <div> has no role, so screen readers cannot jump to it.
- Multiple <main> elements: The HTML spec allows only one. Multiple confuses landmark navigation and fails axe-core.
- Two <nav> elements with no aria-label: Screen readers announce both as "navigation" with no way to tell them apart.
- Wrapping <header> or <footer> inside <article>: They lose their banner/contentinfo roles when nested inside article or section.
- Using <section> without an accessible name: It does not become a region landmark and provides no extra value over <div>.
- Putting <main> inside <article>: <main> must be a top-level structural element, not nested in another landmark.
How to Test Landmarks
- Install an automated accessibility checker browser extension and run it on your page. It will report missing or duplicate landmarks.
- In Chrome DevTools, open the Accessibility pane and check the Accessibility Tree view. Confirm each landmark has the correct role.
- Run NVDA (free) and press D repeatedly to cycle through landmarks. Each one should announce its role and accessible name.
- Use the headingsMap or Landmarks browser extension to visualize landmarks overlaid on the page.
- Run an automated accessibility audit and confirm landmark-related checks pass.
FAQ
How many <main> elements can a page have?
Exactly one visible <main>. The HTML spec forbids multiple. See our deeper guide on using the main landmark in HTML.
Does <header> always become a banner landmark?
Only when it is a direct child of <body>. A <header> inside <article> or <section> is just a sectioning header with no landmark role.
Why does <section> need an aria-label?
Without an accessible name, <section> does not expose a region role. Browsers do this so that arbitrary sections do not pollute the landmark list.
Can I use role="banner" on a <div> instead?
Yes, but prefer the semantic element. ARIA roles are a fallback when you cannot change the HTML structure.
What screen reader shortcut moves between landmarks?
NVDA: D (next) and Shift+D (previous). JAWS: R. VoiceOver on macOS: VO+U opens the rotor and arrow keys cycle landmarks.
Do I need both a top-level <header> and a <header> inside an <article>?
They serve different purposes. The top-level one is a banner landmark. The inner one is a sectioning header (e.g., the article's title and byline) and is not a landmark.
Do landmarks affect SEO?
Indirectly. Search engines use semantic structure to identify primary content, and accessibility improvements correlate with engagement signals.
Can two pages share the same landmark structure?
Yes — that is the goal. Consistent landmarks across pages let returning users navigate efficiently with shortcuts.
Does this affect AI search engines like ChatGPT and Perplexity?
Yes. AI crawlers parse the accessibility tree built from your semantic landmarks to identify the primary content of a page. Without proper <header>, <nav>, <main>, and <footer> structure, AI Overviews and tools like ChatGPT and Perplexity have less reliable signals for what content to extract and cite, which can reduce the chance of your page being surfaced as a source.
Conclusion
Replace top-level <div> wrappers with <header>, <nav>, <main>, <aside>, and <footer>. Keep exactly one <main>, label duplicate <nav> elements with aria-label, and verify by pressing D in NVDA or running an automated accessibility checker. Run a Greadme deep scan to verify landmark structure across every page on your site.