The <article> Element

Technical Summary

Definition, categories, and context

The HTML Standard defines article as a complete piece of content that can, in principle, be distributed or reused independently. “Independent” does not mean that it has no connection to its parent page or site. It describes content that can be treated as one composition.

What “independent content” means

Independence is not decided by a URL, a visual card, or a database record alone. A useful test is whether the composition could be moved to a feed, search result, or another page and still be treated as one piece of content. Writing article does not itself publish, extract, or redistribute anything.

The Standard's examples include a news or magazine article, a blog entry, a user comment, and a widget that can be treated as independent content. These are examples; the element does not require a particular URL format or content-management system.

<main>
  <h1>News</h1>
  <article aria-labelledby="notice-title">
    <h2 id="notice-title">Our opening hours are changing</h2>
    <p>Our opening hours will change next month.</p>
    <p>Published: <time datetime="2026-10-30">October 30, 2026</time></p>
  </article>
</main>

Here, main identifies the page's primary content, and article identifies one news item within the list. The time element marks a date. Adding a date does not automatically add syndication behavior or structured data.

Nesting and content relationships

When an article contains another article, the inner article represents content related to the outer one. A blog post can contain its comments this way. Nesting elements does not create a reply thread or interactive discussion feature.

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

The inner article does not automatically inherit the outer article's author, heading, or date. The HTML Standard says that author information associated with an article does not apply to its nested articles. The WAI-ARIA article role also states that author, heading, date, and other information do not carry over to nested articles.

article, section, main, and div

These elements can be combined. A main can contain several articles. One article can contain sections for its topics. A section can contain several articles. Choose a combination that follows the content model and the meaning of the page.

Headings, names, and accessibility

Adding article does not create a heading or change the level of h1–h6. Choose heading levels for the document's overall hierarchy. Put a real heading in the markup when readers need it to understand the piece.

HTML-AAM 1.0 Working Draft maps the HTML article element to the WAI-ARIA article role. WAI-ARIA defines this as a document-structure role, not a navigation landmark. Its accessible name comes from the author, and the role definition says a name is required. To name an article, reference its visible heading with aria-labelledby. The native element already supplies the role, so an extra role="article" is normally unnecessary.

<article aria-labelledby="review-title">
  <h2 id="review-title">Customer review</h2>
  <p>This example uses the heading text as the article's accessible name.</p>
</article>

This naming pattern does not turn every small group into a landmark. Use a landmark such as main when people need to jump to a major page area; use article to expose the structure of an independent composition.

Fact / Evidence

The specification definition, HTML-AAM role mapping, and WAI-ARIA role characteristics have separate sources. Browser and WPT results are limited to the environments and selected coverage shown here.

Evidence

1. HTML Living Standard: The article element — categories, context, content model, definition, examples, nesting, and author information
2. HTML Living Standard: The section element — thematic groups and the article/section usage distinction
3. HTML Accessibility API Mappings 1.0 Working Draft, 21 October 2026: article — the HTML article role mapping
4. WAI-ARIA 1.2: article role — document structure role, author naming, and the distinction from landmarks
5. Web Platform Tests: html-aam/roles.html at revision 68d964a5f292bc4b2c2eba2f21e2b916190b6ad2 — selected computed-role checks, including article

Implementation Evidence

On 2026-10-30, Chromium 151 was used to observe all four pages at widths from 320 to 1920px, along with language switching and system/light/dark themes. One pinned WPT file passed all 60 checks, including the article check. This local run used the Chromium DevTools Protocol to read computed roles, so it is distinct from an official wptrunner run. The Evidence rows record the conditions.

Coverage / Open Issues

• Specification checkedMeaning, categories, context, content model, section/main distinctions, nesting, and HTML-AAM / WAI-ARIA role
• ObservedFour Japanese/English pages, five viewport widths, three theme settings, the Chromium Accessibility Tree, and one pinned WPT file
• OpenOther browsers and operating systems, platform APIs such as Windows UI Automation and IAccessible2, assistive-technology speech, and the full HTML-AAM/WPT scope

See the Evidence rows for the exact conditions and results. Other browsers and operating systems, Windows accessibility APIs, screen-reader output, and the full WPT suite remain untested. These results do not establish conformance across all environments.

Related surfaces

• Yugien: a beginner-friendly guide to article
• Atlas日本語版: article要素
• section: topic groups and headings
• main: the page's primary content