<article>
Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux
Exemple
#<article>
<header>
<h2>Ma première semaine d’apprentissage du HTML</h2>
<p>Publié le <time datetime="2026-09-14">14 septembre 2026</time></p>
</header>
<p>J’ai commencé par la structure du document et les titres. Après trois jours, j’avais déjà ma propre page de présentation.</p>
<footer>Tags : HTML, débuts</footer>
</article>Définition et utilisation
#L’élément <article> marque un fragment de page qui a du sens même sorti de son contexte : un article de blog, un article de presse, un commentaire, une fiche produit ou un message de forum. Un bon test consiste à se demander ceci : ce fragment pourrait-il apparaître dans un lecteur RSS ou être copié sur une autre page tout en restant compréhensible ? Si oui, c’est un article.
Un article a généralement son propre titre (<h1>-<h6>), souvent accompagné d’un <header> avec la date et l’auteur, ainsi que d’un <footer> avec des tags ou une mention de licence. Les articles peuvent être imbriqués : les commentaires sous un billet sont des éléments <article> distincts à l’intérieur de l’article principal.
Les lecteurs d’écran et les moteurs de recherche traitent <article> comme un point de repère, ce qui permet de passer facilement au bon contenu. L’élément lui-même ne change rien à l’apparence de la page : par défaut, c’est simplement un bloc.
Syntaxe
#<article>
…
</article>Attributs
#Cet élément n’a pas d’attributs propres. Il accepte les attributs globaux, comme class, id ou hidden.
Plus d’exemples
#<article>
<h2>Comment choisir son premier langage de programmation</h2>
<p>Ce qui compte le plus, c’est ce que vous voulez construire.</p>
<section>
<h3>Commentaires</h3>
<article>
<p><strong>Emma :</strong> J’ai commencé par Python et je ne le regrette pas.</p>
</article>
<article>
<p><strong>Hugo :</strong> Moi, c’était HTML et CSS, parce qu’on voit vite des résultats.</p>
</article>
</section>
</article>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
article {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Si un fragment n’a de sens que comme partie d’un ensemble plus grand, utilisez
<section>, pas<article>. - Écrivez la date de publication dans
<time datetime="…">, pour qu’elle soit aussi lisible par les machines. - Ne transformez pas chaque
<div>en<article>. La sémantique doit aider à comprendre la page, pas tout décrire à la fois.
Entrées associées
#- <section> vs <article> vs <div><article> est un contenu autonome, <section> est une partie thématique d’un ensemble plus grand, et <div> est un conteneur neutre sans aucune signification.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <aside>Un contenu secondaire, lié de façon lâche à son environnement : encadré, barre latérale, remarque.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- <footer>Le pied de page d’une page ou d’une section : auteur, droits d’auteur, liens, coordonnées.
- <main>Le contenu principal et unique de la page. Une seule instance visible par page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.