<article>
The <article> element represents a self-contained composition in a document that is independently distributable or reusable. This includes blog posts, news articles, forum posts, user comments, interactive widgets, or any other independent item of content. The key characteristic is that the content should make sense on its own, even when removed from the rest of the page.
This page was last updated on 2025-11-17
Syntax
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
The element requires both opening and closing tags. An article should typically contain a heading element (h1-h6) and can include headers, footers, and other sectioning content. Articles can be nested when representing comments or related content.
Attributes
- Global attributes - The <article> element supports all global attributes such as
id,class,style,lang, anddir.
The <article> element has no element-specific attributes. However, it's common to use microdata attributes like itemscope and itemtype to provide structured data for search engines.
Examples
Blog Post
<article>
<header>
<h2>Understanding CSS Grid Layout</h2>
<p>Posted on <time datetime="2024-03-15">March 15, 2024</time> by Jane Doe</p>
</header>
<p>CSS Grid is a powerful layout system...</p>
<footer>
<p>Tags: CSS, Layout, Web Design</p>
</footer>
</article>
News Article
<article>
<h1>Local Team Wins Championship</h1>
<p>By <span class="author">John Smith</span></p>
<p>The hometown team secured victory in a thrilling final...</p>
</article>
Article with Nested Comments
<article>
<h2>Main Article Title</h2>
<p>Article content here...</p>
<section class="comments">
<h3>Comments</h3>
<article>
<header>
<p>Comment by User123</p>
</header>
<p>Great article! Very helpful.</p>
</article>
</section>
</article>
When to Use
Use the <article> element when:
- Content is independently distributable (could be syndicated via RSS)
- Content makes sense on its own, out of context
- Marking up blog posts, news stories, or magazine articles
- Encapsulating user-submitted comments or forum posts
- Creating reusable widgets (weather widget, stock ticker)
Do NOT use <article> when:
- Content is just a generic section of a page (use <section> instead)
- Content only makes sense in the context of the surrounding page
- Creating a navigation menu (use <nav> instead)
- Marking up sidebar content that supplements the main content (use <aside>)
Remember: If you can imagine the content being shared on social media, published in an RSS feed, or reprinted elsewhere, it's probably an article.
