<article>
Isoler un contenu qui a du sens tout seul : article, post, commentaire
<article> — Le contenu autonome
La balise <article> encadre un contenu autonome : un billet de blog, un commentaire, un widget interactif. Le test : si tu peux l'extraire de la page et qu'il reste compréhensible seul, c'est un <article>.
Quand l'utiliser
Tu veux encadrer un billet de blog, un commentaire utilisateur, un produit dans un catalogue, ou une carte de contenu dans un flux. Chaque <article> peut contenir son propre <header> et <footer>.
Ce que tu gagnes
Accessibilité : chaque <article> reçoit le rôle ARIA article. Dans un flux (liste de billets, fil de commentaires), les lecteurs d'écran permettent de naviguer d'article en article avec les raccourcis de navigation par rôle. C'est différent d'un landmark : un <article> n'apparaît pas dans la liste des repères, mais dans la liste des articles.
Exemple de code
<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>Pour aller plus loin
- Les soupes de div — remplacer les
<div>par des balises sémantiques - WHATWG —
<article> - W3C — ARIA article role
- MDN —
<article>