Missing landmark: why every page needs one
Every page needs exactly one <main> element wrapping the primary content. Screen reader users jump directly to <main> to skip nav, banners, and footer. Without it, they tab through everything to find the article.
Every page needs exactly one <main> element wrapping the primary content. Screen reader users jump directly to <main> to skip nav, banners, and footer. Without it, they tab through everything to find the article. The <main> element is a landmark that identifies the dominant content of the page — usually everything between the header/nav and the footer. It is unique per page (only one <main> allowed) and assistive tech treats it as the primary navigation target.
Last updated·
What it is
The <main> element is a landmark that identifies the dominant content of the page — usually everything between the header/nav and the footer. It is unique per page (only one <main> allowed) and assistive tech treats it as the primary navigation target.
Why it matters
Skip-to-main-content is the single most common screen reader shortcut. Without a <main> landmark, screen readers have nothing to jump to and users have to navigate past the entire header on every page. Search engines also use <main> to identify the page's primary content for snippet extraction.
How to fix it
- Wrap your primary content in <main>. In your base template, wrap everything between header and footer in <main>...</main>. Update the framework layout, not each page.
- Ensure there is only one <main>. Multiple <main> elements per page are invalid. If you have nested layouts, only the outermost should use <main>.
- Add a "skip to main" link. A visually-hidden first link <a href="#main-content">Skip to content</a> that focuses <main id="main-content"> makes the landmark instantly usable.
Authoritative sources
- Google Search Central documentation — Google
- Schema.org vocabulary — schema.org
- SEO Starter Guide — Google Search Central
- MDN — HTML meta and link elements — Mozilla MDN