HTML Guide
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.
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 <section> element can be used to define sections of a document, like chapters, tabbed content, etc. Consider using a heading element (any of <h2> to </h6>) to present each section. Example:
<h1>All about guitars</h1>
<section>
<h2>Guitar types</h2>
<p>Acoustic, electric, classical... we have them all!</p>
</section>
<section>
<h2>Amplifiers</h2>
<p>Analog, digital, portable...</p>
</section>
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>