How many <main> elements may an HTML document contain, and what does <main> do for users and assistive technology?

## What <main> means `<main>` wraps the content that is unique to this document — the part a reader came for. Everything repeated across the site (masthead, primary navigation, site-wide sidebar, footer) belongs outside it. The element carries the `main` landmark role implicitly, so you never need `role="main"` on it. ## The one-per-document rule, stated precisely The rule people repeat is "only one `<main>` per page". The specification's actual constraint is slightly more useful: a document must not have more than one `<main>` element that does **not** have the `hidden` attribute. That exception exists for applications that keep several views in the DOM at once — a router can hold three `<main>` elements and mark two of them `hidden`, and the document is still conforming, because only one is exposed at a time. There is a second, separate constraint that candidates often miss: `<main>` must not be a descendant of `<article>`, `<aside>`, `<footer>`, `<header>` or `<nav>`. `<main>` is a top-level region of the document; nesting it inside a card or a sidebar is invalid, and the reason is the same as the first rule — there is one dominant content region, not one per component. ```html <body> <header>…site masthead and primary nav…</header> <main id="content"> <h1>Refund policy</h1> <p>…the unique content of this page…</p> </main> <footer>…site-wide footer…</footer> </body> ``` ## Why it matters in practice **Skip links.** The single most common accessibility affordance on the web is a link at the very top of the page reading "Skip to main content", pointing at the main region's id: ```html <a class="skip-link" href="#content">Skip to main content</a> ``` Keyboard users who would otherwise tab through forty navigation links on every page press Tab once and Enter. That link needs one unambiguous destination. **Screen-reader shortcuts.** Screen readers expose landmarks in a rotor or menu and offer keys to move between them, with the main landmark as a first-class destination. "Take me to the content" is the single most-used structural command, and it is only meaningful if exactly one region claims to be the content. **Content extraction.** Reader modes and similar tools use structural hints, including `<main>`, when deciding which part of a page is the article body. Marking site furniture as main, or marking nothing at all, makes that guess worse. ## Two visible mains: what actually breaks Nothing crashes. The page renders identically, because `<main>` has no visual behaviour beyond block display. What breaks is the contract: the landmark list now shows two entries both labelled "main", the skip link takes you to whichever id it names while the other region is equally "the content", and validators flag the document as non-conforming. It is a silent accessibility regression, which is precisely why interviewers like the question — it cannot be caught by looking at the screen. ## Related judgment calls Does a sidebar of related links go inside `<main>`? Generally no — if it is tangential and repeated across pages, it is an `<aside>` sibling of `<main>`. But an `<aside>` that is tangential to *this specific article* can legitimately sit inside `<main>` next to the article it relates to; the test is what the content is tangential *to*. Should `<main>` contain the page's top-level heading? Conventionally yes: the `<h1>` describing this document's content lives inside `<main>`, not in the site header. That keeps the heading and the region it titles together. Does `<main>` need a label? Almost never. There is one main landmark, its role already announces it as "main", and adding `aria-label="Main content"` produces the redundant announcement "main content, main". Labels are for landmarks that repeat.