The <article> element

As per the MDN definition:

The HTML Article Element (<article>) represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, or any other independent item of content. Each <article> should be identified, typically by including a heading (h1-h6 element) as a child of the <article> element.

Here are a few important points to remember about the <article> element:

Any self-contained content should be placed inside the <article> element.
Self-contained means that if we take the <article> element and everything inside it out into another context, all the content is self-explanatory and does not need anything else around it to be understood.
An <article> can be nested inside another <article> element.
There can be more than one <article> element in a single page.

Consider the following example:

<body>
    <main class="main-container" role="main">
       <article class="article-container flex-container">
           Content goes here
       </article>
    </main>
</body>

Previous Chapter

2. Marking Our Content with HTML5

Next Chapter

The

element

Table of Contents for Mastering Responsive Web Design

The <article> element

Table of Contents for
Mastering Responsive Web Design