<article> element contains self-contained content like articles, blog posts, user comments or an interactive widget that could be distributed outside the context of the page, for example by RSS.
A blog (
section) with multiple posts (
article), and comments (
article) might look something like this.
<section> <!-- Each individual blog post is an <article> --> <article> <header> <h1>Blog Post</h1> <time datetime="2016-03-13">13th March 2016</time> </header> <p>The article element represents a self contained article or document.</p> <p>The section element represents a grouping of content.</p> <section> <h2>Comments <small>relating to "Blog Post"</small></h2> <!-- Related comment is also a self-contained article --> <article id="user-comment-1"> <p>Excellent!</p> <footer><p>...</p><time>...</time></footer> </article> </section> </article> <!-- ./repeat: <article> --> </section> <!-- Content unrelated to the blog or posts should be outside the section. --> <footer> <p>This content should be unrelated to the blog.</p> </footer>
When the main content of the page (excluding headers, footers, navigation bars, etc.) is simply one group of elements. You can omit the
<article> in favour of the
<article> <p>This doesn't make sense, this article has no real `context`.</p> </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>
<main>element descendants are not allowed within a