<article>

Description

L’élément <article> représente un contenu autonome pouvant être distribué indépendamment du reste de la page. Le test : ce contenu aurait-il du sens s’il était publié dans un flux RSS ou copié dans un autre site ? Si oui, c’est probablement un <article>. Les articles peuvent être imbriqués (ex. commentaires dans un article de blog).

Syntaxe

<article>
  <h2>Titre de l'article</h2>
  <p>Contenu autonome.</p>
</article>

Exemples

Article de blog complet :

<article>
  <header>
    <h1>Pourquoi utiliser CSS Grid</h1>
    <p>Par <a href="/auteur/alice">Alice</a> — <time datetime="2025-01-20">20 janvier 2025</time></p>
  </header>
  <p>CSS Grid simplifie la mise en page complexe…</p>
  <footer>
    <p>Tags : <a href="/css">CSS</a>, <a href="/grid">Grid</a></p>
  </footer>
</article>

Liste de cartes produit :

<ul>
  <li>
    <article>
      <h2>Produit A</h2>
      <p>Description courte.</p>
      <a href="/produit-a">Voir le produit</a>
    </article>
  </li>
</ul>

Notes

<article> vs <section> : <article> est autonome et distributable ; <section> est thématique et fait partie d’un tout. Un article peut contenir des sections, une section peut contenir plusieurs articles.

Imbrication : les commentaires d’un article sont eux-mêmes des <article> imbriqués, car chaque commentaire est un contenu autonome.