HTML Sectioning Elements Main Element
Example
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.
- The
<main>element should only ever be used at most once on a single page. - The
<main>element must not be included as a descendant of anarticle,aside,footer,headerornavelement.
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). -
The
<header>and<footer>tags are siblings to the<main>element.
Notes:
The HTML5 specification recognizes the
<main>element as a grouping element, and not a sectioning element.
- ARIA role attributes:
main(default),presentationAdding 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
