HTML Guide for main

There can only be one visible <main> element in a document. If more are needed (for example for switching between them with JavaScript), only one can be visible, the others should be hidden toggling the hidden attribute.

Example of 2 main elements, where only one is visible:

<main>
  <h1>Active main element</h1>
  <!-- content -->
</main>

<main hidden>
  <h1>Hidden main element</h1>
  <!-- content -->
</main>

A main element cannot be nested within another main element.

The main element represents the primary content of a document or application, and there must be only one per page, not placed inside another main. The main element must not be used as a descendant of another main element. This is important for accessibility, semantic correctness, and helps screen readers correctly identify the main content region.

Invalid example (nested main):

<main>
  <h1>Welcome</h1>
  <main>
    <p>This nested main element is invalid.</p>
  </main>
</main>

Valid example (single main only):

<main>
  <h1>Welcome</h1>
  <section>
    <p>This section is valid and can be placed inside main.</p>
  </section>
</main>

If you need to divide the main content, use sectioning elements like section, article, or div inside a single main element, but never nest main inside main.

The main element represents the dominant contents of the document, so it should not be contained within another section.

A document must not have more than one main element that does not have the hidden attribute specified.

A hierarchically correct main element is one whose ancestor elements are limited to html, body, div, form without an accessible name, and autonomous custom elements. Each main element must be a hierarchically correct main element.

The main landmark role is used to indicate the primary content of a document. It can be added to an element by using role="main", but instead it’s preferable to just use the <main> element. In that case, it’s unnecessary to make the main role explicit. Examples:

<div role="main">
  <!-- this is a valid way to define a main role -->
</div>

<main>
   <!-- but this is shorter and uses correct semantic HTML  -->
</main>