Skip to content
html.sh

<article> - Article Element

The <article> Element

Section titled “The <article> Element”
Sectioning Content HTML5

The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include blog posts, news articles, forum posts, product cards, user comments, or interactive widgets. An article should make sense on its own when removed from the rest of the page.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<article>
  <!-- Self-contained content -->
</article>

Attributes

Section titled “Attributes”

Element-Specific Attributes

Section titled “Element-Specific Attributes”

The <article> element has no element-specific attributes.

Global Attributes

Section titled “Global Attributes”

This element supports all global attributes.

Common Use Cases

Section titled “Common Use Cases”

Blog Post

Section titled “Blog Post”

A complete blog post with header, content sections, and footer:

Result

News Article

Section titled “News Article”

A news article with attribution and publication info:

Result

Product Card in E-commerce

Section titled “Product Card in E-commerce”

Each product as an independent article:

Result

Forum Post with Comments

Section titled “Forum Post with Comments”

A forum post where both the post and comments are articles:

Result

Social Media Post

Section titled “Social Media Post”

Individual social media posts as articles:

Result

Widget or Interactive Component

Section titled “Widget or Interactive Component”

A self-contained interactive widget:

Result

Article vs. Section

Section titled “Article vs. Section”

Understanding when to use <article> vs. <section>:

<!-- Use <article> for independent content -->
<article>
  <h2>Complete Blog Post</h2>
  <p>This could stand alone in an RSS feed...</p>
</article>


<!-- Use <section> within an article to organize content -->
<article>
  <h2>Blog Post Title</h2>
  <section>
    <h3>Introduction</h3>
    <p>Content...</p>
  </section>
  <section>
    <h3>Main Points</h3>
    <p>Content...</p>
  </section>
</article>


<!-- Articles can be nested -->
<article class="blog-post">
  <h2>Main Article</h2>
  <p>Article content...</p>


  <section class="comments">
    <h3>Comments</h3>
    <article class="comment">
      <p>First comment...</p>
    </article>
    <article class="comment">
      <p>Second comment...</p>
    </article>
  </section>
</article>

Best Practices

Section titled “Best Practices”

Include a Heading

Section titled “Include a Heading”

Every article should have a heading (h1-h6):

<!-- Good: Article with heading -->
<article>
  <h2>Article Title</h2>
  <p>Content...</p>
</article>


<!-- Avoid: Article without heading -->
<article>
  <p>Content without a title...</p>
</article>
Section titled “Use Header and Footer”

Structure articles with header and footer when appropriate:

<article>
  <header>
    <h2>Article Title</h2>
    <p class="byline">By Author Name</p>
    <time datetime="2025-03-15">March 15, 2025</time>
  </header>


  <p>Main content...</p>


  <footer>
    <p>Categories: Tech, Web Development</p>
    <p>Share this article</p>
  </footer>
</article>

Nesting Articles

Section titled “Nesting Articles”

Articles can be nested when appropriate (e.g., comments):

<article class="blog-post">
  <h2>Main Post</h2>
  <p>Post content...</p>


  <!-- Nested articles for comments -->
  <article class="comment">
    <h3>Comment Title</h3>
    <p>Comment content...</p>
  </article>
</article>

Microdata and Schema.org

Section titled “Microdata and Schema.org”

Enhance articles with structured data:

<article itemscope itemtype="https://schema.org/BlogPosting">
  <header>
    <h2 itemprop="headline">Article Title</h2>
    <p>By <span itemprop="author">Jane Doe</span></p>
    <time itemprop="datePublished" datetime="2025-03-15">March 15, 2025</time>
  </header>


  <div itemprop="articleBody">
    <p>Article content...</p>
  </div>
</article>

Accessibility

Section titled “Accessibility”

Implicit ARIA Role

Section titled “Implicit ARIA Role”

The <article> element has an implicit ARIA role of article:

<!-- These are equivalent -->
<article>Content</article>
<div role="article">Content</div>

Labeling Articles

Section titled “Labeling Articles”

For better accessibility, especially with multiple articles, use aria-labelledby or aria-label:

<!-- Using aria-labelledby -->
<article aria-labelledby="article-title">
  <h2 id="article-title">Article Title</h2>
  <p>Content...</p>
</article>


<!-- Using aria-label when there's no visible heading -->
<article aria-label="Weather widget for San Francisco">
  <!-- Widget content -->
</article>

Reading Order

Section titled “Reading Order”

Ensure articles appear in logical reading order in the DOM:

<!-- Good: Logical order -->
<main>
  <article><!-- First article --></article>
  <article><!-- Second article --></article>
  <article><!-- Third article --></article>
</main>

Browser Support

Section titled “Browser Support”
BrowserVersion
Chrome5+
Firefox4+
Safari5+
EdgeAll versions
IE9+
Section titled “Related Elements”

Common Mistakes

Section titled “Common Mistakes”

Using Article for Any Content Block

Section titled “Using Article for Any Content Block”
<!-- Wrong: Article for non-independent content -->
<article>
  <img src="logo.png" alt="Logo">
</article>


<article>
  <nav>Navigation links</nav>
</article>


<!-- Correct: Article for self-contained content -->
<article>
  <h2>Blog Post Title</h2>
  <p>Complete, independent content...</p>
</article>

Confusing Article with Section

Section titled “Confusing Article with Section”
<!-- Wrong: Using article like section -->
<article>
  <article>Introduction section</article>
  <article>Main content section</article>
  <article>Conclusion section</article>
</article>


<!-- Correct: Sections within article -->
<article>
  <section>
    <h2>Introduction</h2>
    <p>Content...</p>
  </section>
  <section>
    <h2>Main Content</h2>
    <p>Content...</p>
  </section>
</article>

Missing Headings

Section titled “Missing Headings”
<!-- Wrong: No heading -->
<article>
  <p>Content without a title...</p>
</article>


<!-- Correct: Include heading -->
<article>
  <h2>Article Title</h2>
  <p>Content...</p>
</article>

Specifications

Section titled “Specifications”