HTML <article> Element: Content That Stands on Its Own
In web writing, not everything is part of the same story. Some content can — and should — live on its own. That's what <article> is for: self-contained units that make sense independently, like blog posts, news pieces, or even user reviews.
What Is the <article> Element?
The <article> element represents a standalone block of content. It’s meant to be reused, republished, or syndicated independently of the rest of the page.
Think: blog entries, product descriptions, or fruit facts — ready to go solo.
Basic Syntax
<article>
<h2>Banana Nutrition Facts</h2>
<p>Bananas are packed with potassium and make a great energy snack.</p>
</article>
Banana Nutrition Facts
Bananas are packed with potassium and make a great energy snack.
This article could be copied into a feed, exported to an app, or bookmarked as its own item — and it would still make sense.
When to Use <article>
- Blog posts
- News stories
- Forum entries or discussion threads
- Product listings or documentation chunks
- Testimonials, reviews, and social updates
Example: Fruit Blog with Multiple Articles
<main>
<article>
<h2>Apple: Crisp and Classic</h2>
<p>Apples are crunchy and come in many varieties, like Fuji and Gala.</p>
<footer>
<p>Published on <time datetime="2025-05-24">May 24, 2025</time></p>
</footer>
</article>
<article>
<h2>Cherry: Sweet and Bright</h2>
<p>Cherries are small stone fruits that thrive in early summer.</p>
<footer>
<p>Written by Fruit Enthusiast</p>
</footer>
</article>
</main>
Apple: Crisp and Classic
Apples are crunchy and come in many varieties, like Fuji and Gala.
Published on May 24, 2025
Cherry: Sweet and Bright
Cherries are small stone fruits that thrive in early summer.
Written by Fruit Enthusiast
Each article can stand on its own, yet together they build a cohesive blog or feed.
Syndication-Ready Content
Articles are often targeted for syndication via RSS or APIs. The <article> element ensures each chunk is exportable and meaningful when removed from the larger document.
Nested Elements in <article>
It’s common to include <header>, <footer>, and other semantic tags inside an article.
<article>
<header>
<h2>Fruit Spotlight: Banana</h2>
<p>Written by BananaFan — 2 min read</p>
</header>
<p>Bananas grow in tropical climates and ripen after harvest...</p>
<footer>
<p>Comments (12) | Share</p>
</footer>
</article>
Accessibility & Best Practices
- Use unique
<h2>titles in each article for clarity - Keep article content meaningful when isolated
- Use
<time>,<footer>, and<header>to support metadata
Summary
The <article> element makes content modular and portable. You've learned how to:
- Identify content that should live in an
<article> - Structure blog posts, reviews, and syndication-ready sections
- Apply semantic structure for better accessibility and SEO
What’s Next?
Next, we’ll learn how to group content by theme using the <section> element — perfect for breaking content into clear, readable chunks.
