The HTML <article> tag
The HTML <article> element represents a self-contained composition that could be distributed or reused independently — a blog post, news story, product card, forum post or comment. A good test: would it make sense on its own in a feed or syndication?
Overview
The <article> element wraps content that stands on its own. The test is simple: if you could lift the block out of the page and it would still make complete sense — in an RSS feed, a search result, or republished on another site — it belongs in an <article>. Blog posts, news stories, forum entries, product cards and even a single user comment all qualify.
Articles can nest, and that is by design: a blog post is an <article>, and each reader comment beneath it is its own <article> too. Each one should carry a heading so its purpose is clear in the outline. Where an article needs an intro or a sign-off, wrap those in a <header> and <footer> nested inside it.
The line people blur is <article> versus <section>. Reach for <section> when the content is a thematic part of something larger, and <article> when it is the self-contained whole. If in doubt, ask whether the content could be syndicated on its own — if yes, it is an article.
Syntax
<article>
<h2>Post title</h2>
<p>Post content…</p>
</article>Example
<article style="border:1px solid #e2e8f0;padding:12px;border-radius:8px;">
<h2 style="margin-top:0;">Hello, world</h2>
<p>My first blog post — a self-contained article.</p>
</article>Best practices
- Give every
<article>a heading so its purpose is clear in the outline and to assistive technology. - Use it for content that could stand alone — posts, stories, product cards, comments — not as a generic wrapper.
- Nest a comment thread as individual
<article>elements inside the post's article. - Group an article's intro and closing material in a nested <header> and <footer>.
Frequently asked questions
What is the difference between article and section?
<article> is self-contained and could stand alone; a <section> is a thematic part of something larger. Ask whether the content could be syndicated — if yes, it is an article.Can you nest article elements?
<article> with each reader comment as its own nested <article>.