The HTML main element identifies the dominant content unique to the current document. Put the page’s article, product details, search results, dashboard view, or other primary task inside <main>; keep repeated site chrome outside it. The element also exposes a main landmark to assistive technology.

Use one non-hidden main landmark at a time. A page can contain several main elements in its source when inactive views are hidden, but users should normally encounter only one exposed main landmark.

What belongs in the HTML main element?

Content belongs in the HTML main element when it distinguishes this document or view from other pages on the site. It should answer the page’s primary purpose rather than describe the surrounding website.

• An article page’s heading, publication details, body, and related in-article sections.
• A product page’s product information, pricing, specifications, and purchase controls.
• A search page’s search heading, filters that control the results, and result list.
• A dashboard’s active report, task area, or application view.

The main element may contain headings, paragraphs, lists, forms, articles, sections, and other elements needed to present that content. A page-specific sidebar can belong inside <main> when it directly supports the document, while a repeated site-wide sidebar generally belongs outside it.

A complete page structure: where main content fits

Place <main> inside <body>, alongside the page’s repeated structural landmarks. A compact structure looks like this:

<body> <header>Site identity</header> <nav>Primary links</nav> <main>Unique page content</main> <aside>Related site content</aside> <footer>Site information</footer> </body>

• Header: identifies the site or page and may contain branding or introductory material.
• Navigation: provides links for moving through the site or application.
• Main: contains the document’s dominant, page-specific content.
• Aside: contains tangential or supporting content, such as related links.
• Footer: contains closing information, legal links, or repeated contact details.

For an article, the article heading and text usually sit inside <main>. An article-specific header can sit inside the article, while the site header remains a sibling of main.

How HTML main differs from header, nav, aside, and footer

These elements describe different structural responsibilities. Location alone does not determine whether content belongs in main.

• <header> introduces a site, page, article, or section. A site-wide header is repeated boilerplate, not the page’s main content.
• <nav> groups navigation links. Primary menus, account menus, and breadcrumb navigation should not be placed in main merely because they appear above the content.
• <aside> holds content related to, but separate from, the primary flow. A recurring “Most popular” panel or advertising block usually belongs outside main.
• <footer> provides closing information for the site, page, article, or section. A repeated site footer does not become main content.

Use <section> inside main for a thematic group that needs its own heading. Use <article> for a self-contained item, such as a post or product review. The main element is the broader landmark that contains the page’s primary experience.

Can hidden views expose more than one HTML main element at once?

Normally, expose only one non-hidden HTML main element at a time. Assistive technology uses the main landmark as a shortcut to the primary content, so multiple simultaneously exposed main landmarks can create ambiguity.

Application shells and single-page interfaces may keep several views in the document. In that case, keep the active view in one main element and hide inactive views with the HTML hidden state or an equivalent accessibility-safe mechanism. For example, an inactive view can be represented as <main hidden>, while the active view remains exposed.

• Do not leave several alternate screens visible and mark each one as main.
• Do not rely only on visual positioning to hide an inactive landmark from assistive technology.
• When switching views, remove the hidden state from the new main view before exposing it and hide the previous one.

If the application uses one persistent main landmark and swaps its contents, that also satisfies the one-visible-main pattern.