0%

<article> Article

Self-contained content that makes sense alone, such as a post, card or comment.

By HTML6 (opens in a new tab) · Updated · How we write and check content

An <article> wraps a complete, independent piece of content that could be shared or reused on its own. Blog posts, news stories, product cards, forum posts and user comments all qualify.

Most articles have a heading. They can nest, too; comments inside a post are the usual example. Here is a quick test. If the content would still make sense copied onto another site, it is an article. If it is one part of a bigger topic, use <section>.

The article element in the WHATWG standard (opens in a new tab) names blog posts, comments and widgets as typical cases. The Article, Section, Aside lesson puts it next to its siblings.

Syntax

<article>
  <h2>Title</h2>
  <p>Content</p>
</article>

When to use it

Article is for content that keeps its sense when lifted out and used elsewhere: a news story in a feed, a product tile, a review, a forum reply, a recipe card, a post embedded on another site. A listing page with ten blog previews usually holds ten articles.

A part that only makes sense as a piece of the page, like the ingredients of a recipe, is a <section>. A box you need only for layout is a <div>. On a single blog post page, wrapping the post in an article inside <main> is common and correct, even though there is only one.

Do not make every card an article. A card with only an icon and a link has no heading and nothing that could stand on its own. Assistive technology that announces articles will then report a whole row of meaningless ones. The semantic HTML guide compares the options.

Live example

Edit the code and watch the preview.

<article>
  <h2>How to make pancakes</h2>
  <p>Mix flour, milk and eggs, then fry in a hot pan.</p>
  <img src="pancakes.svg" alt="A stack of pancakes" width="200" height="150">
</article>

More examples

Blog post with nested comments

The post is an article, and each reader comment is a nested article because it is a complete contribution on its own. The comments sit in a section with its own heading, and each comment has a footer naming the author.

<article>
  <h1>Our new rye bread</h1>
  <p>After months of testing, the dark rye is finally on the menu.</p>
  <section>
    <h2>Comments</h2>
    <article>
      <p>Tried it this morning. Perfect with butter!</p>
      <footer>Posted by Sam</footer>
    </article>
    <article>
      <p>Do you sell it sliced?</p>
      <footer>Posted by Mia</footer>
    </article>
  </section>
</article>

A grid of product cards

On a shop page each product is a self-contained card, so each one is an article with a heading, an image and a price. Inline-block CSS places the cards side by side and lets them wrap on small screens.

<style>
.card{display:inline-block;vertical-align:top;width:180px;margin:0 12px 12px 0;border:1px solid #ccc;padding:8px}
.card img{width:100%;height:auto}
</style>
<h1>Pet portraits</h1>
<article class="card">
  <img src="cat.svg" alt="Drawing of a cat" width="400" height="300">
  <h2>Cat print</h2>
  <p>$12</p>
</article>
<article class="card">
  <img src="dog.svg" alt="Drawing of a dog" width="400" height="300">
  <h2>Dog print</h2>
  <p>$12</p>
</article>

Tip: Every article gets a heading.

Browser support

Article is an HTML5 element, and all modern browsers map it to the ARIA article role. Browsers older than HTML5 treated it as an unknown inline element. You will not meet those browsers among real visitors any more.

Accessibility

Open each article with a heading, since screen reader users move between articles by heading. Assistive technology exposes the article role, and it works best when the content really does stand alone. Why structure has to live in the markup is covered in the W3C note Understanding Info and Relationships (opens in a new tab).

Common mistakes

Wrong

<article class="wrapper">
  <div class="sidebar">...</div>
</article>

Right

<div class="wrapper">
  <aside>...</aside>
</div>

article means self-contained content. A plain layout wrapper should be a div.

Frequently asked questions

What is the difference between article and section in HTML?

<article> is for content that makes sense alone and could be syndicated or reused elsewhere: a blog post, a forum post, a comment, a product card. <section> is a thematic part of a larger whole, such as a chapter or a group of related content under a heading. One quick test is to ask whether it would survive in an RSS feed. You can also describe the same post to search engines with schema.org Article structured data (opens in a new tab).

Can an article contain other articles?

Yes, as long as the inner ones relate to the outer one. The textbook case is a blog post as the outer article, with every reader comment as an inner <article>. Each should usually get its own heading, and each may contain its own <header> and <footer>.

Practise it

Related sections elements

<header>Introductory content: the site logo and navigation, or the top of an article.<nav>Wraps the major navigation links.<main>The page's unique, central content. One per page.<footer>Closing content for a page or section, like copyright, contacts and related links.<section>A themed group of content, normally with its own heading.<aside>Content related to the main content but set apart from it, such as a sidebar.<h1>The top-level heading, naming what the page is about.<h2>A main section heading, one step below h1.<h3>A subsection heading inside an h2 section.<h4>Heading for a subsection of an h3 section.<h5>Fifth-level heading, used inside an h4 section.<h6>The lowest heading level, used inside an h5 section.<hgroup>Ties a heading to its subtitle or tagline paragraphs.<address>Contact details for the person or organization behind a page or article.<search>Wraps a search or filter form and creates a search landmark.