HTML Sectioning Elements Article Element

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

The <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.

  • When article elements are nested, the contents of the inner article node should be related to the outer article element.

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>

Avoid unnecessary usage

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 <main> element.

<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>

Notes:

Click here to read the official HTML5 Specification for the <article> element



Got any HTML Question?