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 placed inside an article element according to HTML5 content model rules.
The main element is intended to identify the dominant content of the <body> that is directly related to, or expands upon, the central topic of a document. It is meant to be unique, appearing only once per document, and must not be a descendant of elements like article, aside, header, footer, or nav. Conversely, the article element represents a self-contained composition that could independently be reused or distributed, such as a blog post or news story.
To resolve the error, move the main element so that it is a direct child of the body, and place any article elements inside the main or at the same level, not the other way around.
Incorrect:
<article>
<main>
<h1>Article Title</h1>
<p>This is the article content.</p>
</main>
</article>Correct:
<main>
<article>
<h1>Article Title</h1>
<p>This is the article content.</p>
</article>
</main>Minimal valid HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Article in Main Example</title>
</head>
<body>
<main>
<article>
<h1>Article Title</h1>
<p>This is the article content.</p>
</article>
</main>
</body>
</html>Use only one main element per page and ensure it is not nested inside sectioning elements such as article.
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>