<main>

The HTML <main> element represents the dominant content of the <body> element of a document. The main content area consists of content that directly relates to or expands on the central topic of a document or the central functionality of an application.

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

Usage notes

The contents of a <main> element should be unique to the document. Repeated content across a series of documents or sections of documents such as sidebars, navigation links, copyright information, site logos, and search forms should not be included unless the search form is the primary function of the page.

<main> does not contribute to the structure of the document; that is, unlike elements like <body>, headers like <h2>, and the like, <main> does not affect the DOM's concept of page structure. It is strictly informational.

Example

<main>
    <h1>Apples</h1>
    <p>The apple is the pomaceous fruit of the apple tree.</p>

    <article>
        <h2>Red Delicious</h2>
        <p>These bright red apples are the most common found in many
        supermarkets.</p>
        <p>...</p>
        <p>...</p>
    </article>
        
    <article>
        <h2>Granny Smith</h2>
        <p>These juicy, green apples make a great filling for
        apple pies.</p>
        <p>...</p>
        <p>...</p>
    </article>
</main>
        

Accessibility issues

The <main> element behaves like a mainfundamental role. Landmarks can be used by assistive technology to quickly identify and navigate large sections of the document. Prefer using the <main> element over the role="main" declaration.

Skip navigation

Skip Navigation, also known as "skipnav", is a technique that allows an assistive technology user to quickly bypass large sections of repeating content (main navigation, informational banners, etc.). This allows the user to access the main content of the page more quickly.

Adding an id attribute to the <main> element allows it to be a target of a skip navigation link.

Reader mode

The browser's reading mode feature looks for the presence of the <main> element, as well as header and content section elements when converting content to a specialized reading view.