Page 138 - HTML5
P. 138
</article>
Instead, replace the article with a <main> element to indicate this is the main content for this
page.
<main>
<p>I'm the main content, I don't need to belong to an article.</p>
</main>
If you use another element, ensure you specify the <main> ARIA role for correct interpretation
and rendering across multiple devices and non HTML5 browsers.
<section role="main">
<p>This section is the main content of this page.</p>
</section>
Notes:
• <main> element descendants are not allowed within a <article>
Click here to read the official HTML5 Specification for the <article> element
Main Element
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 an article, aside, footer,
header or nav 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>
• 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).
https://riptutorial.com/ 122
