Understanding Landmarks
By SimpleAccess Editorial Team
The <header> element can be used within sectioning content like <article> to provide local context.
The <header> Element
As defined in the HTML Living Standard, the <header> element represents a group of introductory or navigational aids. It typically contains a group of heading elements, but can also contain other elements, such as a logo, a search form, or an author name.
Visual Example (Scoped Header):
<header>
<h1>Site Title</h1>
<nav>...</nav>
</header>
View HTML Living Standard: The header element
The Global Landmark: banner
When a <header> is a top-level child of the <body>, it is programmatically identified as the banner landmark.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
By using the <header> element as your site's masthead, you assign the "banner" role to that section. This allows screen reader users to jump directly to the top-level navigation and branding using landmark navigation commands.
Usage and Hierarchy
- Multiple Headers: A document can have multiple
<header>elements. You can have one global header (the banner) and individual headers inside every<article>or<section>. - Prohibited Nesting: A
<header>element cannot be a descendant of a<footer>or another<header>element. - Content: While headers usually contain headings, they are also appropriate for search bars, breadcrumbs, and language toggles.
A11y Tip: Identifying Scoped Headers
Only the global header is a landmark by default. If you use headers inside sections, they help with document structure but do not clutter the "landmarks" list in screen readers. This ensures a clean navigational experience.