What Are HTML Landmarks
HTML landmarks are regions of a webpage that users might want quick access to, particularly those using screen readers or other assistive technologies. These landmarks translate the visual layout of a page into programmatic structures that assistive technologies can navigate efficiently.
Implementing proper HTML landmarks is a fundamental aspect of professional web development services that ensures your website reaches all users effectively. Landmarks help search engines understand your page structure as well, contributing to better SEO performance.
The Accessibility Tree Connection
To understand landmarks effectively, visualize how browsers represent web content to assistive technologies. The accessibility tree is a parallel structure to the DOM that exposes semantic information to screen readers. When you use semantic HTML elements that create landmarks, the browser automatically populates this accessibility tree with the appropriate role information.
Understanding how the accessibility tree works is essential for creating truly accessible web experiences. For developers looking to deepen their knowledge, pairing landmark implementation with modern CSS methodologies like Cube CSS creates a solid foundation for maintainable, accessible code.
| HTML Element | Implied Landmark Role | Requirements |
|---|---|---|
| <header> | banner | Must be direct child of <body> |
| <nav> | navigation | N/A |
| <main> | main | N/A |
| <footer> | contentinfo | Must be direct child of <body> |
| <aside> | complementary | N/A |
| <form> | form | Must have accessible name |
| <section> | region | Must have accessible name |
| <search> | search | N/A |
The Banner Landmark
The banner landmark identifies site-oriented content at the beginning of each page within a website. This typically includes the website logo, identity of the site sponsor, and site-specific search functionality.
Implementation
The HTML <header> element creates a banner landmark when its context is the <body> element. However, when a <header> is nested within <article>, <aside>, <main>, <nav>, or <section>, it does not create a banner landmark.
<body>
<header>
<img src="/logo.png" alt="Company Logo" />
<nav aria-label="Primary">
<!-- Navigation links -->
</nav>
</header>
</body>
Proper banner landmark implementation ensures that assistive technology users can quickly locate site-level content like navigation and branding elements. This attention to semantic structure is what separates professional web development from basic HTML implementation.
The Navigation Landmark
Navigation landmarks identify groups of links intended for website or page content navigation. The HTML <nav> element implicitly creates a navigation landmark.
Labeling Multiple Navigation Regions
Since a website may have multiple navigation regions, each should have a unique label using aria-label:
<nav aria-label="Primary">
<!-- Main site navigation -->
</nav>
<nav aria-label="Footer">
<!-- Footer links -->
</nav>
Note: Avoid including "navigation" in the label. Screen readers announce the type separately, so "Primary" is announced as "Primary navigation." This labeling approach improves usability for users relying on assistive technology to navigate your site efficiently.
Effective navigation landmark implementation requires the same attention to detail as working with JavaScript fundamentals - both contribute to building a complete, accessible web experience.
The Main Landmark
The main landmark identifies the primary content of the page--the core content that is unique to the current document and directly related to its primary purpose. Each page should have exactly one main landmark.
Implementation
The HTML <main> element implicitly creates a main landmark:
<main>
<article>
<h1>Page Title</h1>
<!-- Primary content here -->
</article>
</main>
Best Practice: The main content should include the central topic focus and related content. Navigation, sidebars, and supplementary information should be placed outside the main landmark. This separation helps both assistive technology users and search engines understand your page structure.
Additional Landmark Types
Search Landmark
Contains search functionality. Use the <search> element or role="search" on a form:
<search>
<form role="search">
<input type="search" aria-label="Site search" />
<button type="submit">Search</button>
</form>
</search>
Complementary Landmark
Identifies content complementary to main content using <aside>:
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related Articles</h2>
<!-- Related content -->
</aside>
Contentinfo Landmark
Identifies footer information using <footer> as a direct child of <body>:
<footer>
<p>© 2025 Company Name</p>
<nav aria-label="Legal">
<a href="/privacy">Privacy Policy</a>
</nav>
</footer>
Each landmark type serves a specific purpose in creating a well-structured, accessible page.
Region and Form Landmarks
Region Landmark
The <section> element creates a region landmark only when it has an accessible name:
<section aria-labelledby="comments-heading">
<h2 id="comments-heading">Comments</h2>
<!-- Comment content -->
</section>
Important: Region landmarks must have a label. Use them judiciously--overusing regions diminishes their utility. Reserve region landmarks for important content that doesn't fit other landmark categories.
Form Landmark
The <form> element creates a form landmark only with an accessible name:
<form aria-labelledby="contact-heading" action="/contact" method="post">
<h2 id="contact-heading">Contact Us</h2>
<!-- Form fields -->
</form>
Tip: Use aria-labelledby to reference a visible heading for the best user experience.
Key guidelines for creating accessible landmark structures
Cover All Content
Include all perceivable content in a landmark region to ensure nothing is overlooked by assistive technology users.
Label Multiple Instances
When using the same landmark type multiple times, provide unique labels to distinguish each instance.
Use Native HTML
Prefer semantic HTML elements that implicitly create landmarks rather than adding ARIA roles to generic elements.
Maintain Hierarchy
Keep banner, main, complementary, and contentinfo landmarks as top-level landmarks.
Test Across Browsers
Verify landmark implementation using browser accessibility inspectors and automated testing tools.
Avoid Overusing Regions
Reserve region landmarks for important content that doesn't fit other landmark categories.
Complete Example: Properly Structured Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example Page</title>
</head>
<body>
<!-- Banner landmark -->
<header>
<a href="/"><img src="/logo.png" alt="Site Logo" /></a>
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
</header>
<!-- Main landmark -->
<main>
<article>
<h1>Article Title</h1>
<p>Main article content...</p>
<!-- Region landmark for comments -->
<section aria-labelledby="comments-heading">
<h2 id="comments-heading">Comments</h2>
<!-- Comment content -->
</section>
</article>
<!-- Complementary landmark -->
<aside aria-labelledby="sidebar-heading">
<h2 id="sidebar-heading">Related</h2>
<!-- Related content -->
</aside>
</main>
<!-- Search landmark -->
<search>
<form role="search" aria-label="Site search">
<input type="search" placeholder="Search..." />
</form>
</search>
<!-- Contentinfo landmark -->
<footer>
<p>© 2025 Company Name</p>
<nav aria-label="Legal">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</nav>
</footer>
</body>
</html>
This structure creates seven landmark regions: banner, navigation, main, region (comments), complementary, search, and contentinfo. Each landmark serves a specific purpose in helping assistive technology users navigate efficiently.
Frequently Asked Questions
How many main landmarks should a page have?
Each page should have exactly one main landmark. This identifies the primary content unique to that page. If your page has multiple distinct content sections, they should all be contained within a single main landmark.
Do I need to add role="main" to the main element?
No. The <main> element implicitly creates a main landmark without any additional attributes. Adding role="main" is unnecessary and not recommended by the first rule of ARIA.
When should I use a region landmark?
Use a region landmark for content that is important enough for users to navigate to directly but doesn't fit other landmark categories. The section must have an accessible name via aria-labelledby or aria-label. Examples include comments sections, testimonials carousels, or data display areas.
How do I test if landmarks are working correctly?
Use browser accessibility inspectors (Firefox Accessibility Inspector, Chrome Accessibility Inspector) to view the accessibility tree and verify landmarks are created correctly. Automated tools like axe can also identify landmark issues.
What is the difference between header and banner?
The <header> element creates a banner landmark only when it's a direct child of <body>. When nested within <article>, <aside>, <main>, <nav>, or <section>, it serves as the header for that section but doesn't create a page-level banner landmark.