The <main> element contains the main content for your web page. This content is unique to the individual page, and should not appear elsewhere on the site. Repeating content like headers, footers, navigation, logos, etc., is placed outside the element.

In the following example, we’re displaying a single blog post (and related information like references and comments).

<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <h1>Individual Blog Post</h1>
        <p>An introduction for the post.</p>

        <article>
            <h2>References</h2>
            <p>...</p>
        </article>

        <article>
            <h2>Comments</h2> ...
        </article>
    </main>

    <footer>...</footer>
</body>

Notes:

The HTML5 specification recognizes the <main> element as a grouping element, and not a sectioning element.

Adding a role="main" ARIA role attribute to other elements intended to be used as main content is advised to aid user agents that don’t support HTML5 and also to provide more context for those that do.

The <main> element by default has the main role, and so does not need to be provided.

Click here to read the official HTML5 Specification for the <main> element