HTML Guide
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.
Learn more:
Related W3C validator issues
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>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>