Skip to main content

Accessibility 101: HTML Landmarks

  • 5 min read

What Are HTML Landmarks?

HTML Landmarks are semantic elements that define the different regions of a webpage. They help users, especially those using assistive technologies, understand and navigate the structure of your website. Think of landmarks as signposts that guide users through different sections of your content.

Why Are Landmarks Important?

Accessibility

Landmarks play a crucial role in web accessibility by:

  • Allowing screen reader users to quickly navigate between different page sections
  • Providing a clear structure for keyboard navigation
  • Helping users understand the purpose and organization of different page areas

SEO

Landmarks are essential for SEO by:

  • Allowing scrapers such as Google Index to understand the main content on your page.
  • Allow scrapers to understand repetitive content.
  • Provide more metadata about structure of your website and pages.

The 6 Core HTML Landmarks

Here are the most common landmark regions you should be familiar with:

Header <header>

The header landmark contains introductory content for a page or section. It may contain the site logo, the navigation landmark (mentioned next) and optionally things like site announcement banners.

<header>
    <nav>
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
        </ul>
    </nav>
</header>

Navigation <nav>

The navigation landmark identifies major navigation blocks throughout the page. It is most commonly used for the main navigation of a website but any large navigation blocks, such as in-page or footer elements, should also be nested.

<nav aria-label="Main">
    <!-- Primary navigation links -->
</nav>

<nav aria-label="Footer">
    <!-- Footer navigation links -->
</nav>

Main <main>

The main landmark represents the primary content of your page. All non-repetitive content should be nested within here. The <main> tag is also where users should be able to skip to using a Bypass Block.

<main>
    <h1>Welcome to Our Website</h1>
    <!-- Main content goes here -->
</main>

Complementary <aside>

The aside landmark, often referred to as the complementary section, contains supporting content that is not necesarry to the main page content. It can still be nested within the main tag. Often items such as related articles or content live within these sections.

<aside>
    <h2>Related Articles</h2>
    <!-- Supporting content -->
</aside>

Footer <footer>

The footer landmark contains, you guessed it, content related to the website footer. This may be additional organisation information, links and copyright information.

<footer>
    <p>&copy; 2024 Your Company</p>
    <!-- Footer content -->
</footer>

Form <form>

Tricked! While <form> is not a landmark element by default, it can become one with the addition of a landmark role such as role="search" or role="form". This makes it easier for screen reader users to jump directly to search or form sections of your page.

Only use these roles when the form is a significant standalone feature, such as site search or a checkout process, not for small inline forms.

<form role="search" aria-label="Site Search">
    <label for="search">Search</label>
    <input id="search" type="text" name="q" />
    <button type="submit">Search</button>
</form>

Best Practices for Using Landmarks

Once you understand the different landmarks they are easy to implement. Here are some additional HTML landmark best practices to remember.

1. Use Semantic HTML

Always prefer semantic HTML elements over ARIA roles when possible:

Good

Using the semantic HTML element such as <main>:

<main>
    <!-- All page content -->
</main>

Less Preferred

Using an aria-role on a div element:

<div role="main">
    <!-- All pageontent -->
</div>

2. Label Duplicate Landmarks

When using multiple instances of the same landmark, provide unique labels:

<nav aria-label="Main Navigation">
    <!-- Primary navigation -->
</nav>

<nav aria-label="Product Categories">
    <!-- Secondary navigation -->
</nav>

3. Maintain a Clear Structure

Landmarks should follow a logical structure:

<body>
    <header>
        <nav aria-label="Main">
            <!-- Navigation -->
        </nav>
    </header>
    
    <main>
        <!-- Main content -->
        <aside>
            <!-- Complementary content -->
        </aside>
    </main>
    
    <footer>
        <!-- Footer content -->
    </footer>
</body>

4. Avoid Empty Landmarks

Ensure each landmark contains meaningful content and at least one heading to introduce content:

<main>
    <h1>Welcome to Our Site</h1>
    <!-- Content -->
    <aside aria-label="Newsletter sign-up>
        <h2> Sign up for our newsletter </h2>
        <!-- Content -->
    </aside>
</main>

Common Mistakes to Avoid

  1. Using multiple <main> elements on a single page
  2. Nesting landmarks incorrectly
  3. Forgetting to label multiple instances of the same landmark
  4. Using unnecessary landmark roles
  5. Omitting essential landmarks like <main> and <nav>

Testing Landmarks

Testing your landmarks is essential to ensure your page is navigable and understandable for users of assistive technologies. Automated tools are a great starting point, but nothing substitutes using actual assistive tech to test your site.

Screen Readers

Use a screen reader to test how easily users can jump between landmark regions. Popular options include:

  • NVDA – Free and widely used on Windows
  • VoiceOver – Built into all macOS and iOS devices
  • JAWS – Common in enterprise environments

Use keyboard shortcuts to navigate by landmark (e.g. D in NVDA or Control + Option + Command + L in VoiceOver) and confirm regions are labeled clearly and logically.

Dev Tools

Most modern browsers include built-in accessibility inspection tools to help you visually check landmark structure:

  • Chrome DevTools: Use the Accessibility pane in the Elements panel to inspect roles and ARIA labels.
  • Firefox Accessibility Inspector: Offers a dedicated accessibility tree and landmark highlighter.
  • Safari Web Inspector: Enable the accessibility tab for VoiceOver-focused testing.

Scanning Tools

For quick scanning there are also multiple accessibility extensions available:

These tools can alert you to missing landmark roles, duplicate main elements, or unlabeled navigation blocks. They're a great first pass, but remember — they only catch what they’re programmed to detect.

Key Takeaways

  • Use semantic HTML elements whenever possible
  • Include all essential landmarks (<header>, <main>, <nav>, <footer>)
  • Label multiple instances of the same landmark
  • Ensure landmarks contain meaningful content
  • Test with actual assistive technologies

Resources

Stay Updated

Subscribe to our newsletter for the latest accessibility tips and updates. We promise to not annoy you; we'll only send the important things.