The
<article>tag represents self-contained content that can be independently distributed or reused, such as a blog post, news article, or forum post.
It typically contains headings, paragraphs, images, and other related content.<article>is ideal for content that makes sense on its own, even outside the context of the page.
Syntax
<article>
<!-- Self-contained content like blog post or news article -->
</article>Attributes
| Attribute | Description |
|---|---|
| id | Assigns a unique identifier. |
| class | Specifies one or more class names. |
| style | Inline CSS styling. |
| title | Provides additional information about the element. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Article Tag Example</title>
</head>
<body>
<h1>Blog Page</h1>
<article style="border: 1px solid #ccc; padding: 15px; margin-bottom: 20px;">
<h2>Understanding HTML Semantic Tags</h2>
<p>Semantic tags like <article>, <section>, and <header> provide meaning and structure to web pages.</p>
<p>They help both **users** and **search engines** understand the content better.</p>
</article>
<article style="border: 1px solid #ccc; padding: 15px;">
<h2>Benefits of Using Semantic HTML</h2>
<p>Semantic HTML improves accessibility, SEO, and maintainability of websites. It makes content easier to read for humans and machines alike.</p>
</article>
</body>
</html>Output
Browser Output
You will see distinct content blocks styled with borders and padding.
Each <article> represents a self-contained piece of content, like a blog post.
Try it in our TryIt Editor to see how multiple articles can coexist on the same page.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <article> tag.
Notes
<article>should be independent content suitable for syndication or reuse.- Can contain headings, paragraphs, images, lists, and other HTML content.
- Helps improve SEO and accessibility.
- Can be nested inside
<section>or<main>for better organization.
Conclusion
The <article> tag is essential for structuring self-contained content on web pages.
It provides semantic meaning and improves readability, SEO, and accessibility.
