HTML Tags

HTML <article> Tag

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

html

<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

html

<!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

html

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	Edge	Firefox	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.

PreviousHTML <footer> Tag NextHTML <section> Tag