La balise HTML <article>

La balise <article> est l'un des éléments de sectionnement HTML5. Elle définit un contenu indépendant et autonome — quelque chose qui aurait encore du sens par lui-même si vous le retiriez de la page pour le publier ailleurs. Un bon test : si le contenu pouvait être distribué via un flux RSS, affiché sous forme de carte autonome, ou republié sur un autre site sans perdre son sens, il appartient à un <article>.

Les utilisations typiques de l'élément <article> comprennent :

un article de blog ou une actualité
un message de forum
une fiche produit dans un catalogue
un commentaire ou un avis d'utilisateur
un widget ou un gadget interactif

Pourquoi utiliser l'élément `<article>` ?

L'élément <article> porte une signification sémantique qu'un <div> générique n'apporte pas :

Accessibilité. Lorsqu'un <article> possède un nom accessible (par exemple, un titre référencé via aria-labelledby), les technologies d'assistance l'exposent comme un repère de type article. Les utilisateurs de lecteurs d'écran peuvent ainsi naviguer entre les articles sans lire toute la page de haut en bas.
SEO et sémantique. Les moteurs de recherche et les outils de lecture (comme le « mode lecture » des navigateurs) utilisent <article> comme signal pour identifier le corps principal et autonome du contenu, ce qui les aide à extraire le texte principal d'un article.
Maintenabilité. Le balisage décrit la finalité du contenu, ce qui permet à votre CSS et à votre JavaScript de cibler de véritables unités sémantiques plutôt que de simples crochets de style.

`<article>` vs `<section>` vs `<div>`

Ces trois éléments sont faciles à confondre. Voici une règle pratique :

<article> — contenu autonome pouvant être distribué ou syndiqué indépendamment (un article de blog, un commentaire, une fiche produit). Demandez-vous : « Ce contenu pourrait-il exister seul ailleurs ? » Si oui, utilisez <article>.
<section> — un regroupement thématique de contenu connexe au sein d'un document, généralement accompagné d'un titre (par exemple, « Commentaires » ou « Produits associés »). Il fait partie du plan du document, mais n'est pas destiné à être autonome.
<div> — un conteneur générique sans signification sémantique. À utiliser uniquement lorsqu'aucun autre élément ne convient, principalement à des fins de style ou de mise en page.

Un <article> et un <section> peuvent être imbriqués dans un sens ou dans l'autre : un <section> peut regrouper plusieurs éléments <article>, et un <article> peut contenir des éléments <section> qui divisent son contenu. Lorsque des éléments <article> sont imbriqués, l'élément interne représente un contenu lié à l'élément externe — par exemple, un commentaire à l'intérieur d'un article de blog.

Structurer un `<article>`

Vous pouvez utiliser quelques éléments connexes pour donner à un <article> une structure complète :

Les éléments de titre (<h1> à <h6>) pour intituler et structurer son contenu. Chaque <article> peut commencer par son propre titre.
Un <header> pour le contenu d'introduction comme le titre et les métadonnées, et un <footer> pour le contenu de clôture.
Un élément <address> pour fournir des informations sur l'auteur. Il s'applique à chaque <article> indépendamment, y compris aux éléments imbriqués.
Un élément <time> avec un attribut datetime pour indiquer la date de publication.

Plusieurs balises <article> peuvent être utilisées dans un même document HTML.

Syntaxe

La balise <article> fonctionne par paires. Le contenu est écrit entre la balise ouvrante (<article>) et la balise fermante (</article>).

Exemple de la balise HTML `<article>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <h1>Title of the article</h1>
      <p>Text of the article</p>
    </article>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la balise HTML `<article>` dans la balise HTML `<section>` :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Articles about flowers</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
      <article>
        <h2>Lilies</h2>
        <p> Lily - an amazing beauty flower, one of the most ancient among a variety of bulbous plants. </p>
      </article>
    </section>
  </body>
</html>

Essayez vous-même »

Exemple d'une fiche d'article de blog avec `<header>`, `<footer>`, `<time>` et `<address>` :

Cet exemple montre un article de blog réaliste et autonome : un <header> contient le titre et la date de publication, un <address> indique l'auteur, et un <footer> clôt l'article.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <article>
      <header>
        <h2>How to Grow Roses</h2>
        <p>
          Published on
          <time datetime="2026-06-17">June 17, 2026</time>
        </p>
      </header>
      <p>Rose – the queen of flowers – is the object of worship and ardent love. With a little care, anyone can grow healthy, fragrant roses at home.</p>
      <footer>
        <p>Written by
          <address>
            <a href="mailto:[email protected]">Jane Doe</a>
          </address>
        </p>
      </footer>
    </article>
  </body>
</html>

Result

Attributs

La balise <article> ne possède pas d'attributs spécifiques. Elle prend en charge les attributs globaux et les attributs d'événements.

Mettre en forme l'élément `<article>`

Par défaut, <article> est un élément de type bloc sans style visuel, il ressemble donc à un simple <div>. Vous définissez vous-même l'apparence avec CSS. La règle ci-dessous donne à chaque article une bordure, un rembourrage et un espacement pour que les cartes soient visuellement séparées :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      article {
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <article>
      <h2>Roses</h2>
      <p>Rose – the queen of flowers – is the object of worship and ardent love.</p>
    </article>
    <article>
      <h2>Lilies</h2>
      <p>Lily – an amazing beauty flower, one of the most ancient bulbous plants.</p>
    </article>
  </body>
</html>

Accessibilité et ARIA

L'élément <article> possède un rôle ARIA implicite article, vous n'avez donc généralement pas besoin d'ajouter role="article" vous-même. Pour en faire un repère navigable que les lecteurs d'écran peuvent lister et cibler, donnez-lui un nom accessible — le plus souvent en faisant pointer aria-labelledby vers le titre qu'il contient :

<article aria-labelledby="post-title">
  <h2 id="post-title">How to Grow Roses</h2>
  <p>Roses reward patient gardeners with fragrant, long-lasting blooms.</p>
</article>

Les éléments de sectionnement connexes à associer à <article> sont <section> pour les regroupements thématiques, <aside> pour le contenu tangentiellement lié (comme une barre latérale), et <header> / <footer> pour le contenu d'introduction et de clôture. Consultez la vue d'ensemble des éléments de sectionnement HTML5 pour une vision complète.

Entraînement

Pratique

Que représente l'élément article en HTML ?

Un regroupement thématique de contenu connexe au sein d'un document.Un hyperlien vers une autre page.Un contenu indépendant et autonome pouvant être distribué seul.Le début d'une page web.Un élément multimédia intégré, tel qu'un audio ou une vidéo.

Pourquoi utiliser l'élément <article> ?

<article> vs <section> vs <div>

Structurer un <article>