article
Self-contained, independently distributable content such as blog posts, news articles, forum posts, product cards, or user comments.
Usage
Use the <article> element for content that:
- Makes sense on its own, outside the context of the page
- Could be syndicated or shared independently (RSS, social media)
- Represents a complete, self-contained composition
Common uses include blog posts, news articles, product cards, forum posts, comments, and widgets.
Examples
Default
Basic article with header and content.
Article Title
Published on
This is the main content of the article. It contains the body text that readers will engage with.
.blog
Optimized for long-form reading with constrained width (65ch).
How to Write Better Articles
in Writing
Writing compelling articles requires understanding your audience, structuring your thoughts clearly, and revising thoroughly. The key is to focus on delivering value to your readers.
Start with an outline, draft freely, then edit ruthlessly. Your readers will thank you for respecting their time.
.card
Card-style article with border, background, and padding.
Product Feature Update
We have released new features that improve performance by 40% and add dark mode support.
Read more.feature
Hero-style feature article with centered header.
Introducing Vanilla Breeze
A layered HTML component system for modern web development
Build accessible, performant websites with native HTML elements enhanced through progressive CSS styling.
.compact
Compact list-item style for article listings.
Getting Started with CSS Grid
Learn the fundamentals of CSS Grid layout in this beginner guide.
Understanding Flexbox
Master flexible box layout for responsive designs.
.nested
Nested articles for comments and replies with indentation.
This is a great article! Thanks for sharing.
Thank you for the kind words!
Looking forward to more content like this.
Variants
| Class | Description |
|---|---|
.blog |
Long-form reading layout with 65ch max-width, spaced header/footer |
.card |
Card styling with border, background, padding, and rounded corners |
.feature |
Grid layout with centered header for hero-style content |
.compact |
Flexbox horizontal layout for article listings |
.nested |
Indented with left border for threaded comments/replies |
Accessibility
- Articles create landmark regions that screen readers can navigate to
- Always include a heading (h1-h6) to label the article content
- Use
<header>and<footer>within articles for structured metadata - Include
<time>elements withdatetimeattributes for publication dates - Nested articles maintain proper heading hierarchy (avoid skipping levels)