HTML Free Codes<article>
Denotes autonomous, self-sufficient content blocks
✨ HTML5Definition and Usage
The <article> element specifies independent, self-contained content.
An article should make sense on its own and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:
- Forum post
- Blog post
- News story
- Comment
- Product card
- User-submitted content
Tip: The
<article> element does not render as anything special in a browser. However, you can use CSS to style it.
Note: The
<article> element is new in HTML5 and helps with SEO and accessibility.
Browser Support
The <article> tag is supported in all major browsers:
Chrome
6.0+
Firefox
4.0+
Safari
5.0+
Edge
9.0+
Opera
11.1+
Attributes
The <article> tag supports the Global Attributes in HTML.
The <article> tag also supports the Event Attributes in HTML.
Examples
Basic Blog Post
Define a blog post as an article:
Example
<article>
<h2>Introduction to HTML5</h2>
<p>Published on January 15, 2025</p>
<p>HTML5 is the latest version of HTML that introduces many new features...</p>
</article>Article with Header and Footer
Include metadata with header and footer:
Example
<article>
<header>
<h2>Understanding CSS Grid</h2>
<p>By Jane Developer | March 10, 2025</p>
</header>
<p>CSS Grid is a powerful layout system that allows you to create complex layouts...</p>
<footer>
<p>Tags: CSS, Web Design, Tutorial</p>
</footer>
</article>Multiple Articles in a Page
Display multiple blog posts:
Example
<main>
<article>
<h2>First Blog Post</h2>
<p>Content of the first blog post...</p>
</article>
<article>
<h2>Second Blog Post</h2>
<p>Content of the second blog post...</p>
</article>
<article>
<h2>Third Blog Post</h2>
<p>Content of the third blog post...</p>
</article>
</main>Nested Articles (Comments)
Use nested articles for comments:
Example
<article>
<h2>Main Blog Post</h2>
<p>This is the main content of the blog post...</p>
<section>
<h3>Comments</h3>
<article>
<h4>John Doe</h4>
<p>Great article! Very helpful.</p>
<time datetime="2025-01-15">January 15, 2025</time>
</article>
<article>
<h4>Jane Smith</h4>
<p>Thanks for sharing this information.</p>
<time datetime="2025-01-16">January 16, 2025</time>
</article>
</section>
</article>News Article
Structure a news article:
Example
<article>
<header>
<h1>Breaking News: New Web Standards Released</h1>
<p>
<time datetime="2025-01-15T14:30:00">January 15, 2025 at 2:30 PM</time>
by <a href="/author/john">John Reporter</a>
</p>
</header>
<section>
<p>The W3C announced today that new web standards have been approved...</p>
<p>These standards include improvements to accessibility and performance...</p>
</section>
<footer>
<p>Category: Technology | 5 min read</p>
</footer>
</article>Product Card
Use article for e-commerce product:
Example
<article>
<img src="product.jpg" alt="Wireless Mouse">
<h3>Wireless Mouse</h3>
<p>Ergonomic design with precision tracking</p>
<p>Price: <strong>$29.99</strong></p>
<button>Add to Cart</button>
</article>Forum Post
Structure a forum post:
Example
<article>
<header>
<h2>How to learn JavaScript?</h2>
<p>Posted by <strong>user123</strong> on January 10, 2025</p>
</header>
<p>I'm new to programming and want to learn JavaScript. What resources do you recommend?</p>
<footer>
<p>Views: 245 | Replies: 12</p>
</footer>
</article>Styled Article with CSS
Add styling to articles:
Example
<style>
article {
background: #f4f4f4;
border-left: 4px solid #745af2;
padding: 20px;
margin: 20px 0;
border-radius: 8px;
}
article header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
margin-bottom: 15px;
}
article h2 {
margin: 0;
color: var(--text-primary);
}
</style>
<article>
<header>
<h2>Styled Article</h2>
<p>January 15, 2025</p>
</header>
<p>This article has custom styling applied with CSS.</p>
</article>Try it Yourself
Interactive Example
Here's a live example of a styled article:
Understanding Semantic HTML
Published on January 15, 2025 by HTML Free Codes
Semantic HTML uses meaningful tags that describe the content's purpose. The <article> tag is a perfect example of semantic HTML in action.
Article vs Section vs Div
- <article>: Self-contained, distributable content (blog posts, news articles, forum posts)
- <section>: Thematic grouping of content, typically with a heading (chapters, tabs, numbered sections)
- <div>: Generic container with no semantic meaning (styling, layout)
Rule of Thumb: If you can syndicate or distribute the content independently, use
<article>. If it's just a thematic grouping, use <section>. For pure styling, use <div>.
Best Practices
- Each
<article>should be independently distributable or reusable - Include a heading (
<h1>-<h6>) within each article - Use
<article>for blog posts, news articles, forum posts, and comments - Articles can be nested (e.g., comments within a blog post)
- Combine with
<header>,<footer>, and<section>for better structure - Helps with SEO and accessibility by providing semantic meaning
- Screen readers can identify and navigate articles more easily
SEO Benefits
- Search engines understand content structure better
- Improves content indexing and ranking
- Helps identify main content vs supplementary content
- Better rich snippets in search results
- Improves reader view and browser parsing
Default CSS Settings
Most browsers will display the <article> element with the following default values:
Default CSS
article {
display: block;
}