In the world of web accessibility, landmarks create the high-level structure of a page. The banner landmark, which is typically defined by the `<header>` element, identifies the global header for the website. To ensure a logical and predictable structure for users of assistive technologies, this banner landmark must be a top-level landmark and should never be nested inside another landmark element.
Think of your website as a newspaper. The masthead with the newspaper’s name is always at the very top, never buried in the middle of a story. The same is true for your website’s banner. By ensuring it isn’t contained within another landmark, you create a more accessible and user-friendly experience for everyone. For a deeper dive into the world of accessibility, see our article on accessibility.
Understanding Top-Level Landmarks
The primary structural elements of a page—the banner, the main content, and the footer—are considered top-level landmarks. They should be direct children of the `<body>` element and should not be nested inside each other. This creates a clear, non-overlapping structure that is easy for screen readers to parse. For a complete overview, see the W3C’s guide to landmark regions.
<header>(banner): The site-wide header.<main>(main): The main, unique content of the page.<footer>(contentinfo): The site-wide footer.
Correcting Nested Landmarks
This issue typically occurs when a developer mistakenly places the main site `<header>` inside the `<main>` landmark. The fix is to ensure the `<header>` is a sibling to, not a child of, the `<main>` element.
<!-- Before: Incorrectly nested header -->
<body>
<main>
<header>
<h1>My Website</h1>
<nav>...</nav>
</header>
<p>Page content...</p>
</main>
</body>
<!-- After: Correctly structured landmarks -->
<body>
<header>
<h1>My Website</h1>
<nav>...</nav>
</header>
<main>
<p>Page content...</p>
</main>
</body>For more on the importance of a well-structured website, check out this guide to containing all content in landmarks.
Frequently Asked Questions
What is a banner landmark?
A banner landmark identifies the header content of a webpage, which is typically consistent across the site (e.g., logo, site title, main navigation). It is most commonly created using the `<header>` HTML element.
Can a page have more than one <header> element?
Yes, a page can have multiple `<header>` elements. However, only the `<header>` that is a direct child of the `<body>` element is considered the top-level ‘banner’ landmark. Other `<header>` elements inside sections like `<article>` or `<section>` are valid but are not ‘banner’ landmarks.
Why shouldn’t a banner landmark be nested in another landmark?
Nesting a top-level landmark like a banner inside another landmark (e.g., putting your main site `<header>` inside your `<main>` content) creates a confusing and illogical structure for assistive technologies. It’s like finding the front door of a house inside the living room.
Ready to make your website more accessible? Start your Creeper audit today and see how you can improve your website’s accessibility.