main
The main content landmark — the page's primary content, excluding repeated headers, navigation, and footers. The <main> element carries this role automatically. Exactly one main per page.
When to use
Use the <main> element. It is the single most important landmark on the page — screen-reader users typically jump to main first to skip past navigation and headers.
role="main" on a <div> is appropriate only when you cannot use <main> (a CMS constraint, mostly). Both forms must satisfy the same rule: exactly one main per page. Multiple mains break the “skip to main content” affordance, and many screen readers expose only the first.
The main landmark should contain everything unique to the current page, and should not contain the site header, primary navigation, or footer. Put those in <header>, <nav>, and <footer> siblings, not inside <main>.
When to label
A single main does not need a label — screen readers announce it as “main”. Add aria-label only if the page has multiple mains (which it shouldn’t) or if you want to distinguish a SPA’s main content area from a previous one for some reason.
The “Skip to main content” link should point at <main id="main"> (or whichever id you give it) with <a href="#main"> at the top of the page — this is WCAG 2.4.1’s bypass-blocks technique.
Common failures
- Two
<main>elements on the same page. The most common cause: a SPA inlining a new view’s<main>without removing the previous. - Page with no
<main>at all. Screen-reader users cannot skip past the header. <main>placed inside<header>or<footer>. The landmark hierarchy is wrong.- Putting site-wide navigation inside
<main>. It repeats across pages, so it belongs in<header>/<nav>, not in the page’s unique content. - “Skip to main content” link pointing at an id that does not exist.
Example
<body>
<a href="#main" class="visually-hidden focus-visible">Skip to main content</a>
<header>…</header>
<main id="main">
<h1>Why one main landmark per page</h1>
<p>…</p>
</main>
<footer>…</footer>
</body>