vs — how do I choose?

Use for content that's independently distributable, like a single blog post. Use for a thematic grouping within a larger page that doesn't stand alone.

Can an contain a , or vice versa?

Yes to both — a long article can be broken into s, and a of a page (like "Latest Posts") can contain multiple s.

Should a blog post use or ?

Use for the post itself, because it makes sense on its own. Inside the post, use for its chapters, each with its own heading.

<article> Tag in HTML – Syntax, Attributes & Live Example

Quick facts

Category	Flow content, sectioning content, palpable content
Content model	Flow content
Tag omission	Neither the start nor end tag can be omitted
Permitted parents	Any element that accepts flow content
DOM interface	`HTMLElement`

Syntax

<article>
  <h2>Title</h2>
  <p>...</p>
</article>

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
—	`<article>` has no attributes of its own — only the global attributes shared by every HTML element.

Common examples

A blog post

The classic article: its own header with title and date, the content, and a footer with the author.

<article>
  <header>
    <h1>How I learned HTML</h1>
    <time datetime="2026-10-03">October 3, 2026</time>
  </header>
  <p>It started with a single page…</p>
  <footer>Written by Jane Doe</footer>
</article>

A list of cards

Each card in a blog index or product grid is self-contained, so each one can be an article.

<section>
  <h2>Latest posts</h2>
  <article class="card">
    <h3><a href="/posts/html-tips/">10 HTML tips</a></h3>
    <p>Simple habits that make your pages better.</p>
  </article>
  <article class="card">…</article>
</section>

Comments inside a post

User comments are self-contained too, so they can be articles nested inside the post’s article.

<article>
  <h1>Post title</h1>
  <p>Post text…</p>
  <section>
    <h2>Comments</h2>
    <article>
      <p><strong>Sam</strong>: Great post!</p>
    </article>
  </section>
</article>

A news article with a byline

Combine <time> for the date and <address> for the author’s contact details.

<article>
  <h1>City opens new library</h1>
  <p>By <a href="/authors/jane/">Jane Doe</a> · <time datetime="2026-10-03T09:00">3 Oct 2026, 9:00</time></p>
  <p>…</p>
</article>

<article> vs <div>

A <div> is a meaningless box used for styling and layout. An <article> tells browsers, screen readers and search engines that the content inside is a complete, independent piece — something that would make sense on its own, such as a post, a story or a product card.

The test is simple: could you share or syndicate this content by itself? If yes, use <article>. If it’s just a wrapper to make the layout work, use a div.

	<article>	<div>
Meaning	Self-contained content	None
Typical use	Posts, cards, comments	Layout and styling
Usually has a heading	Yes	No

Common mistakes to avoid

Wrapping the whole page in one article. The menu, sidebar and footer aren’t part of the article; wrap only the self-contained content.
Using article for small fragments. A single paragraph or a “contact us” box isn’t a standalone piece of content.
Articles without headings. Each article should usually start with a heading that says what it is.
Using article just for styling. If you only need a box, a div is the honest choice.

Accessibility & SEO tips

Screen readers can list and jump between articles, which makes long pages of posts or comments easier to browse.
Add Article or BlogPosting structured data to blog posts so search engines understand the title, author and dates.
Mark publish and update dates with <time datetime> so they are machine-readable.
Give each article a clear, descriptive heading — screen readers often list articles by their headings, so “Post 1” or “Read more” tells visitors nothing about what is inside.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.

Related tags

Frequently asked questions

<article> vs <section> — how do I choose?

Use <article> for content that's independently distributable, like a single blog post. Use <section> for a thematic grouping within a larger page that doesn't stand alone.

Can an <article> contain a <section>, or vice versa?

Yes to both — a long article can be broken into <section>s, and a <section> of a page (like "Latest Posts") can contain multiple <article>s.

Should a product card be an <article>?

Yes, if the card is self-contained — name, image, price and a link that would make sense on its own. In a product grid, each card can be an article.

Does <article> help SEO?

Indirectly. It helps search engines separate the main content from menus and sidebars, especially when combined with a clear heading and Article structured data.

Can a page have more than one <article>?

Yes. Blog indexes, news pages and comment threads often contain many articles, each with its own heading.

What is the difference between <article> and <main>?

Main wraps all the unique content of a page and appears once. An article is one self-contained piece, so a page can have several articles inside its main area, such as a list of blog posts or a thread of comments.

Should a blog post use <article> or <section>?

Use <article> for the post itself, because it makes sense on its own. Inside the post, use <section> for its chapters, each with its own heading.