<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.
Comparaison point par point
#Porte une signification sémantique
A du sens isolé de son contexte
Devrait avoir son propre titre
Rôle pour les lecteurs d’écran
Quand le choisir
Exemple
#<article>
<header>
<h2>Première semaine d’apprentissage du HTML</h2>
</header>
<section>
<h3>Ce que je sais déjà faire</h3>
<p>Structure du document, titres et sémantique de base.</p>
</section>
<div class="tags" style="display: flex; gap: 6px;">
<span>HTML</span><span>débuts</span>
</div>
</article>Définition et utilisation
#La différence entre <article> et <section> tient surtout à l’autonomie du contenu. Un bon test pour <article> : ce fragment aurait-il un sens isolé de son contexte, par exemple dans un lecteur RSS ou collé sur une autre page ? Si oui, c’est un article, par exemple un billet de blog, un commentaire ou une fiche produit. <section> regroupe du contenu autour d’un seul thème au sein d’un ensemble plus grand, par exemple un chapitre d’article ou un bloc "Tarifs" sur la page d’accueil, et porte généralement son propre titre.
<div> ne porte aucune signification. Il n’informe ni les lecteurs d’écran, ni les moteurs de recherche, ni les autres développeurs sur la nature de cette partie de la page. Il n’existe que comme point d’ancrage pour le style en CSS ou pour être retrouvé en JavaScript.
La règle de choix est simple : vérifiez d’abord <article> (contenu partageable de façon autonome), puis <section> (partie thématique avec un titre), et réservez <div> aux situations où vous avez seulement besoin d’un conteneur sans aucune signification. Ces éléments peuvent aussi s’imbriquer librement, par exemple des commentaires en <article> à l’intérieur de l’article principal.
Syntaxe
#<article>...</article>
<section>
<h2>...</h2>
...
</section>
<div>...</div>Plus d’exemples
#<article>
<h2>Comment choisir son premier langage de programmation</h2>
<p>L’essentiel, c’est ce que vous voulez construire.</p>
<section>
<h3>Commentaires</h3>
<article>
<p><strong>Léa :</strong> J’ai commencé par Python et je ne regrette rien.</p>
</article>
</section>
</article><section aria-labelledby="pricing-title">
<h2 id="pricing-title">Tarifs</h2>
<div class="plans" style="display: flex; gap: 12px;">
<div class="plan">Free</div>
<div class="plan">Premium</div>
</div>
</section><div class="plans"> ne décrit pas le contenu, il regroupe seulement des cartes pour Flexbox. C’est <section> qui porte le titre et le sens de la page.
Bonnes pratiques
#- Si vous hésitez entre
<section>et<div>, demandez-vous : cette partie a-t-elle son propre thème et son propre titre ? Si non,<div>suffit généralement. - Ne transformez pas chaque
<div>en<article>ou<section>juste pour que le code paraisse sémantique. La sémantique doit aider, pas tout décrire à la fois. - Les commentaires sous un billet sont un exemple naturel d’
<article>imbriqués à l’intérieur de l’article principal.
Entrées associées
#- <article>Un contenu autonome qui garde son sens une fois lu ou partagé séparément.
- <section>Une partie thématique d’un document, généralement avec son propre titre.
- <div>Un conteneur de bloc générique sans signification, pour grouper des éléments et les styliser.
- <header>L’introduction d’une page ou d’une section : logo, titre, navigation, informations sur l’auteur.
- <h1>-<h6>Des titres à six niveaux, du plus important h1 au moins important h6. Ensemble, ils forment le plan de la page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.