Définition et utilisation de la balise <article>
LES BALISES HTMLLa balise <article> délimite un contenu indépendant et autonome dans une page web. Autonome signifie ici une chose précise : si vous extrayez ce contenu et que vous le publiez ailleurs — dans un flux RSS, une application mobile ou une autre page — il reste compréhensible sans le reste du site autour.
La confusion avec <section> est fréquente. La différence tient à une question simple : ce contenu a-t-il du sens hors contexte ? Une section regroupe des parties thématiquement liées à la page — elle dépend du tout. Un article, lui, se suffit à lui-même. Quant à <div>, il n'a aucune signification sémantique : c'est une boîte neutre, sans valeur pour les moteurs de recherche.
Cas d'usage courants de <article> :
- Un billet de blog ou un article de presse
- Un commentaire d'utilisateur sur un forum
- Une fiche produit dans un catalogue
- Un message dans un fil de discussion
- Un widget météo ou boursier avec son propre contenu
La balise <article> requiert une balise ouvrante <article> et une balise fermante </article>. Comme tous les éléments de type block, elle provoque un retour à la ligne avant et après son contenu.
Exemple d'utilisation
Une structure typique avec <article> : un titre, un paragraphe de contenu et une date de publication dans un <footer>. Le <time> avec son attribut datetime est la façon correcte d'indiquer une date lisible par les machines.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Exemple balise article</title>
</head>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 a été présenté au public
le 14 mars 2011 à 21h00 (heure du Pacifique).</p>
<footer>
<p>Publié le <time datetime="2011-03-14">14 mars 2011</time></p>
</footer>
</article>
</body>
</html>
Articles imbriqués
Les balises <article> peuvent s'imbriquer. Le cas le plus courant : les commentaires d'un billet de blog. Chaque commentaire est un contenu autonome rattaché à l'article parent — il a son propre auteur, sa propre date, son propre sens. L'imbrication reflète cette relation sans casser la sémantique.
<article>
<h1>Mon article de blog</h1>
<p>Contenu de l'article...</p>
<article> <!-- commentaire imbriqué : contenu autonome rattaché à l'article parent -->
<h2>Commentaire de Sophie</h2>
<p>Très intéressant, merci !</p>
</article>
</article>
Compatibilité navigateur
La balise <article> est supportée par tous les navigateurs modernes depuis des années : Chrome, Firefox, Safari, Opera et Edge l'interprètent correctement.
Note historique : Internet Explorer 8 et les versions antérieures ne reconnaissaient pas <article>. La solution de l'époque était de créer l'élément manuellement en JavaScript avec document.createElement('article') avant le chargement du DOM. IE est aujourd'hui hors support depuis 2022 — ce contournement n'a plus lieu d'être.
Différence avec HTML 4.01
La balise <article> n'existait pas en HTML 4.01. Avant HTML5, on utilisait des <div> pour tout structurer — ce qui fonctionnait visuellement, mais ne disait rien aux moteurs de recherche sur la nature du contenu. HTML5 a introduit <article>, <section>, <nav> et d'autres balises sémantiques précisément pour combler ce manque.
Attributs globaux
Comme toutes les balises HTML, <article> accepte les attributs globaux : id, class, style, lang, etc.
Attributs d'événement
La balise <article> accepte aussi les attributs d'événement comme onclick, onmouseover, etc.
Par carabde | Mis à jour le 03 juin 2026