<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.
<main>element should only ever be used at most once on a single page.
<main>element must not be included as a descendant of an
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>
The blog post is contained within the
<main> element to indicate this is the main content for this page (and therefore, unique across the website).
<footer> tags are siblings to the
The HTML5 specification recognizes the
<main>element as a grouping element, and not a sectioning element.
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.
<main>element by default has the main role, and so does not need to be provided.