How to Use the article Element — A Piece of Content That Stands on Its Own

The HTML article element marks a piece of content that can be treated as one item, such as a blog post or a forum post. Ask whether the content would still make sense as its own piece if it were taken out of the rest of the page.

The answer first

A small example

<main>
  <h1>News</h1>
  <article aria-labelledby="hours-title">
    <h2 id="hours-title">Our opening hours are changing</h2>
    <p>Starting next month, we will be open from 9 a.m. to 5 p.m.</p>
    <p>Published: <time datetime="2026-10-30">October 30, 2026</time></p>
  </article>
</main>

main groups the page's central content. The article is one news item inside it. Choose heading levels to fit the heading order of the whole page.

article, section, and div

Element	When to use it
article	You want to treat a post or other composition as one piece of content
section	A topic within the page needs its own heading
div	You need a wrapper for styling or scripts, with no extra meaning

For example, a section called “This week’s news” can contain several article elements, one for each news item. You can use both elements together.

Put comments inside a post

If each comment can be read as its own post, you can place an article inside the main article. The inner article is related to the outer one.

<article aria-labelledby="post-title">
  <h2 id="post-title">A bird I saw in the park</h2>
  <p>I saw a white bird near the pond.</p>

  <article aria-labelledby="comment-title">
    <h3 id="comment-title">Comment</h3>
    <p>I saw one in the same place last week.</p>
  </article>
</article>

Common misunderstandings

• Writing article does not automatically create a new web page or a list of articles.
• The element does not create a heading or change heading levels for you.
• You do not need article just to draw a box around content.

How does a screen reader find an article?

A browser exposes article as an article-like piece of content. It is different from a landmark used to jump to a major area of a page. If you need to give an article a name, connect it to its visible heading with aria-labelledby.

Read the detailed reference in Atlas

For the specification's definition, element category, nesting rules, accessibility role, and browser and WPT coverage, see the Yugien Atlas article element page. The guide to section also explains how a topic group differs from an article.