Français

<article>

Isolate content that makes sense on its own: article, post, comment

— 2 min read

  • HTML
  • accessibility
  • semantics
  • structure

<article> — Self-contained content

The <article> element wraps self-contained content: a blog post, a comment, an interactive widget. The test: if you can extract it from the page and it still makes sense on its own, it is an <article>.

When to use it

You want to wrap a blog post, a user comment, a product in a catalog, or a content card in a feed. Each <article> can contain its own <header> and <footer>.

What you gain

Accessibility: each <article> receives the ARIA article role. In a feed (list of posts, comment thread), screen readers let users navigate from article to article using role-based navigation shortcuts. This is different from a landmark: an <article> does not appear in the list of landmarks, but in the list of articles.

Code example

<article>
  <header>
    <h2>Why semantic HTML matters</h2>
    <time datetime="2026-04-24">April 24, 2026</time>
  </header>
  <p>Semantic elements give meaning to your markup...</p>
  <footer>
    <p>Written by <a href="/about">Yoann</a></p>
  </footer>
</article>

Further reading