ACCESSIBILITY

Home › Glossary › Accessibility· 240 ·

Landmark Elements

/ˈlændmɑːrk ˈɛlɪmənts/noun

Filed underAccessibilityFront EndWeb Development

In brief · quick answer

Landmark elements are HTML5 semantic elements that define the major regions of a page (<header>, <nav>, <main>, <aside>, <section>, <footer>). They create navigation points that screen reader users can jump to directly, bypassing repetitive content and moving between page regions with a single keystroke.

§ 1 Definition

Landmark elements are HTML5 structural elements that identify the major sections of a web page for assistive technology users. Screen readers expose landmarks through a dedicated menu or navigation shortcut (typically the D key in NVDA and JAWS, the rotor in VoiceOver). This allows users to jump directly to the navigation, main content, search region, or complementary content without tabbing through every link and paragraph. The primary landmarks are <header> (banner role), <nav> (navigation role), <main> (main role), <aside> (complementary role), <section> (region role when labelled), <footer> (contentinfo role), and <form> with aria-label or aria-labelledby (form landmark). Using landmarks correctly is one of the highest-impact, lowest-effort accessibility improvements available, and it costs nothing in development time beyond choosing the right HTML elements.

§ 2 The landmark elements and their implicit roles

<header> when it is a page-level banner (not nested in <article> or <section>) gets the banner role. <nav> gets the navigation role, used for primary and secondary navigation blocks. When you have multiple nav elements, distinguish them with aria-label (e.g., <nav aria-label="Main"> and <nav aria-label="Footer">). <main> gets the main role and should be unique per page. <aside> gets the complementary role for content that is tangentially related to the main content. <footer> when page-level gets the contentinfo role. <section> needs an accessible name (aria-label or aria-labelledby) to be exposed as a region landmark. Without a name, a <section> is not a landmark. <form> is exposed as a form landmark only when it has an accessible name.

§ 3 Best practices for landmark usage

Every page should have at least <header>, <nav>, <main>, and <footer>. The <main> element must be unique. Do not put <main> more than once on a page. Use <nav> only for primary and secondary navigation blocks, not for every group of links. A list of links in a sidebar of related articles may not need a <nav> element. Use <nav> for navigation, not for every link group. Use <aside> for content that could be removed without reducing the main content's meaning. Test landmark coverage: screen reader users can pull up a landmarks list in most screen readers. If your page has no landmarks, or only one, the user receives no structural signal and must wade through the entire page linearly.

§ 4 In code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landmark Example</title>
</head>
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Home"></a>
  </header>

  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <h1>Welcome to Atomic Glue</h1>
    <p>We build accessible websites.</p>
  </main>

  <aside aria-label="Related content">
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/blog/a11y-basics">Accessibility Basics</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 Atomic Glue</p>
  </footer>
</body>
</html>

§ 5 Common questions

Q. Can I have multiple <nav> elements on a page?: A. Yes, but each must be labelled distinctly with aria-label or aria-labelledby. Without labels, the user hears "navigation, navigation" when switching between them and cannot tell them apart unless they explore each one.
Q. Does the <section> element automatically create a landmark?: A. Only if it has an accessible name (aria-label, aria-labelledby, or a heading element referenced by aria-labelledby). An unnamed <section> is not a landmark. When in doubt, use <section aria-labelledby="section-heading-id">.

Key takeaways

Landmarks define major page regions for screen reader navigation.
Use <header>, <nav>, <main>, <aside>, and <footer> for the core structure.
Label multiple instances of the same landmark type distinctly.
Every page should have at least <header>, <nav>, <main>, and <footer>.
<section> needs an accessible name to be a landmark.

How Atomic Glue helps

Atomic Glue builds every page with a clear landmark structure. We ensure screen reader users can navigate your site as efficiently as sighted users. Our Web Development services include landmark audit and implementation. Get in touch.

Get in touch

# Landmark Elements

Category: Accessibility (also: Front End, Web Development)

Author: Atomic Glue Team

## Definition

## The landmark elements and their implicit roles

## Best practices for landmark usage

## In code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Landmark Example</title>
</head>
<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Home"></a>
  </header>

  <nav aria-label="Main navigation">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/services">Services</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>

  <main>
    <h1>Welcome to Atomic Glue</h1>
    <p>We build accessible websites.</p>
  </main>

  <aside aria-label="Related content">
    <h2>Related Articles</h2>
    <ul>
      <li><a href="/blog/a11y-basics">Accessibility Basics</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 Atomic Glue</p>
  </footer>
</body>
</html>

## Common questions

Q: Can I have multiple <nav> elements on a page?

A: Yes, but each must be labelled distinctly with aria-label or aria-labelledby. Without labels, the user hears "navigation, navigation" when switching between them and cannot tell them apart unless they explore each one.

Q: Does the <section> element automatically create a landmark?

A: Only if it has an accessible name (aria-label, aria-labelledby, or a heading element referenced by aria-labelledby). An unnamed <section> is not a landmark. When in doubt, use <section aria-labelledby="section-heading-id">.

## Key takeaways

Landmarks define major page regions for screen reader navigation.
Use <header>, <nav>, <main>, <aside>, and <footer> for the core structure.
Label multiple instances of the same landmark type distinctly.
Every page should have at least <header>, <nav>, <main>, and <footer>.
<section> needs an accessible name to be a landmark.

## Related entries

Last updated July 2026. Permalink: atomicglue.co/glossary/landmark-elements