HTML Free Codes<article>
Denotes autonomous, self-sufficient content blocks
✨ HTML5Quick Answer
What is the <article> tag?
The <article> tag represents independent, self-contained content that could be distributed separately, like blog posts, news articles, forum posts, or product cards. It's an HTML5 semantic element that helps search engines and screen readers understand content structure. Articles can be nested and typically contain headings.
Definition 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
<article> element
does not render as anything special in a browser. However, you can
use CSS to style it.
<article> element is
new in HTML5 and helps with SEO and accessibility.
Browser Support
The <article> tag is supported in all major
browsers:
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)
<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;
}