Definition and Usage

<article> tag represents a complete or independently distinguishable composition within a document, page, application, or website.

This tag is used to structure content as items that can be independently distributed or reused.
For example, these items can include forum posts, message board entries, news articles, blog posts, user comments, or social media posts.

Basic Example

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Blog Post Example</title>
    </head>
    <body>
        <h1>Blog Post Example</h1>
        
        <!-- First blog post -->
        <article>
            <h2>Web Design Trends 2023</h2>
            <p>This post provides predictions and insights about web design trends in 2023. ...</p>
            <time datetime="2024-10-15">October 15, 2024</time>
            <a href="/web-design-trends-2024">Read Original</a>
        </article>

        <!-- Second blog post -->
        <article>
            <h2>The Importance of UX Design</h2>
            <p>This post discusses why user experience (UX) design is important. ...</p>
            <time datetime="2024-10-12">October 12, 2024</time>
            <a href="/ux-design-importance">Read Original</a>
        </article>

        <!-- Third blog post -->
        <article>
            <h2>Mobile App Development Tips</h2>
            <p>This post provides useful tips and guidelines for developing mobile apps. ...</p>
            <time datetime="2024-10-10">October 10, 2024</time>
            <a href="/mobile-app-development-tips">Read Original</a>
        </article>
    </body>
</html>

In this example, <article> tag is used to represent a list of blog posts. Each <article> element contains a single, independent content unit that can be managed individually.

Using the <article> tag in this way allows each blog post to be recognized as a standalone content unit, which can then be extracted or reused on the main blog page, archive pages, or other related topic pages.

Semantic Purpose

Many people tend to think of the <article> tag primarily as a container for news articles, blog posts, or similar written content. This perception comes from its common usage. However, the <article> tag is not limited to representing just articles or blog posts—it has a broader range of applications.

The purpose of the <article> tag is to represent an independent content unit.

This content unit should be meaningful on its own and capable of being distributed or reused independently. Therefore, beyond news articles and blog posts, <article> can be used for various types of standalone content, such as research papers, product reviews, forum posts, comments, widgets, or descriptions of independent events or occurrences.

While news articles and blog posts are among the most common use cases for <article>, they do not define the tag’s only purpose. Web developers should consider the structure and semantics of a webpage when deciding which content qualifies as independently reusable and apply the <article> tag appropriately.

Difference Between <article> and <section>

It is easy to confuse the intended use of <article> and <section> tags. Here’s a summary of the differences:

  • The <article> tag is used to group content that can be independently distributed or reused.
  • In contrast, the <section> tag is used to organize content thematically within a document or application.
  • If it makes sense to separate the content as a standalone unit distinguishable from the rest of the page, <article> is usually the better choice over <section>.

Code Explanation
The <section> tag represents a generic section of a document or application. It is used to group content thematically when there is no more suitable element available with a clearer semantic meaning.

Syntactic Features

  • As an independent and distributable content unit, the <article> tag cannot be a child or descendant of the <address> tag, which is used to represent contact information.
  • When <article> tags are nested, the inner tag represents content related to the outer one. For example, in a blog post that allows user comments, each comment can be marked up as a nested <article> inside the <article> representing the blog post.
  • Author information for an <article> can be provided using the <address> tag. However, this does not apply to nested <article> tags. If you need to provide author details for a nested <article>, the <footer> tag is the more semantically appropriate choice.
  • The implicit role attribute value of the <article> tag is article.

Usage Examples

The <article> tag can be used to group the following types of content:

  1. News articles
  2. Blog posts
  3. Comments
  4. Product descriptions
  5. Event information
  6. Other standalone content

News Article

HTML 
<article>
    <header>
        <h2>Local Weather Report</h2>
        <time datetime="2025-07-20">July 20, 2025</time>
    </header>
    <p>
        Today, cloudy skies are expected across most of the country,
        with scattered showers in some regions.
    </p>
    <p>
        In the Northeast, rain is likely in the afternoon,
        while the morning will remain mostly cloudy.
    </p>
    <p>
        In the Midwest, expect morning rain followed by partly
        cloudy conditions later in the day.
    </p>
    <footer>
        <p>Source: National Weather Service</p>
    </footer>
</article>

Blog Post

HTML 
<article>
    <header>
        <h2>A Relaxing Day</h2>
        <time datetime="2025-07-20">July 20, 2025</time>
    </header>
    <p>
        The weather was beautiful today, so I went for a walk in the park.
    </p>
    <p>
        While walking, I felt calm and refreshed, enjoying the sunshine.
    </p>
    <p>
        Later, I had a delicious dinner and watched a good movie at home.
    </p>
    <footer>
        <p>Author: John Doe</p>
    </footer>
</article>

Comment

HTML 
<article class="comment">
    <p>
        This is a very insightful article. Thanks for sharing!
    </p>
    <footer>
        <p>Author: Jane Smith</p>
        <time datetime="2025-07-20">July 20, 2025</time>
    </footer>
</article>

Product Description

HTML 
<article>
    <header>
        <h2>Wireless Headphones</h2>
    </header>
    <p>
        High-quality wireless headphones with noise-canceling features.
    </p>
    <img src="product-image.jpg" alt="Wireless headphones">
    <p>
        Price: $199
    </p>
    <p>
        Shipping: Free standard shipping within the U.S.
    </p>
    <p>
        Return Policy: 30-day money-back guarantee
    </p>
</article>

Event Information

HTML 
<article>
    <header>
        <h2>Web Development Conference</h2>
        <time datetime="2025-07-20">July 20–30, 2025</time>
    </header>
    <p>
        Join us for a week-long conference featuring industry experts and hands-on workshops.
    </p>
    <img src="event-image.jpg" alt="Conference image">
    <p>
        How to Register: Visit our official website to sign up.
    </p>
    <p>
        Prizes: Attendees will have a chance to win tech gadgets.
    </p>
</article>

Other Standalone Content

HTML 
<article>
    <header>
        <h2>Interview with a Software Engineer</h2>
    </header>
    <p>
        A detailed interview with a senior developer about best practices in coding.
    </p>
    <img src="interview.jpg" alt="Interview photo">
    <p>
        Interviewed by: Tech Times
    </p>
    <time datetime="2025-07-20">July 20, 2025</time>
</article>

These examples clearly demonstrate the kinds of content the <article> tag can represent. Each <article> defines an independent unit of content that can stand on its own and be reused elsewhere.

Additionally, it can be applied to research papers, product reviews, forum posts, interviews, and more.

Using Nested <article> Tags

A single document can contain multiple <article> tags.
It is also valid to nest <article> tags within another <article>. The following example shows a weekly weather forecast using nested <article> tags. Each nested <article> represents an independent content unit for a specific day's forecast, while being grouped under the parent <article> titled "New York Weather Forecast."

HTML 
<article>
    <h1>New York Weather Forecast</h1>
    <article>
        <h2>October 17, 2024</h2>
        <p>Expect clear skies throughout the day.</p>
    </article>
    <article>
        <h2>October 18, 2024</h2>
        <p>Partly cloudy conditions are expected.</p>
    </article>
    <article>
        <h2>October 19, 2024</h2>
        <p>Rain showers are likely.</p>
    </article>
</article>

Technical Syntax Summary

Technical Syntax Summary of the <article> tag
Permitted parents The <article> tag must not be a descendant of the <address> tag.
Implicit ARIA role article
Permitted ARIA roles application, document, feed, main, none, presentation, region

Browser compatibility

Browser compatibility for the article tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<article> 5 12 4 5

Specifications

Specification for the article tag
Specification
<article> HTML Standard
#the-article-element

References

See also