06. article Element

Introduction

The <article> element represents a self-contained composition that could be independently distributed or reused. It’s used for blog posts, news articles, forum posts, comments, and any content that makes sense on its own. The article element helps search engines and assistive technologies identify independent content pieces.

Basic Usage

<article>
    <header>
        <h1>Article Title</h1>
    </header>
    <p>Article content...</p>
    <footer>
        <p>Published on <time datetime="2024-01-15">January 15, 2024</time></p>
    </footer>
</article>

Common Use Cases

Blog Post

<article>
    <header>
        <h1>Blog Post Title</h1>
        <p>By Author Name</p>
        <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Post content...</p>
    <footer>
        <p>Tags: HTML, Web Development</p>
    </footer>
</article>

News Article

<article>
    <header>
        <h1>News Headline</h1>
        <p>Source: News Agency</p>
    </header>
    <p>Article content...</p>
</article>

Multiple Articles

<main>
    <article>
        <h1>Article 1</h1>
        <p>Content...</p>
    </article>
    <article>
        <h1>Article 2</h1>
        <p>Content...</p>
    </article>
</main>

Nested Articles

Articles can be nested for comments or related content:

<article>
    <h1>Main Article</h1>
    <p>Content...</p>
    <section>
        <h2>Comments</h2>
        <article>
            <h3>Comment by User</h3>
            <p>Comment content...</p>
        </article>
    </section>
</article>

Best Practices

Self-Contained Content

Use article for content that stands alone:

<!-- Good: Standalone content -->
<article>
    <h1>Complete Article</h1>
    <p>Full article content that makes sense independently.</p>
</article>

<!-- Avoid: Fragment of content -->
<article>
    <p>Just a paragraph fragment.</p>
</article>

References

• MDN Web Docs - article element