English

<div>

Regrouper du contenu quand aucune balise sémantique ne convient

— 1 min de lecture

  • HTML
  • accessibilité
  • sémantique

<div> — Le conteneur générique

La balise <div> est un conteneur générique sans aucune valeur sémantique. Les lecteurs d'écran l'ignorent complètement. C'est le dernier recours quand aucune balise sémantique ne fait le travail.

Quand l'utiliser

Tu veux grouper des éléments pour appliquer un style ou un comportement JavaScript, et aucune balise sémantique (<section>, <article>, <aside>, <nav>, <figure>) ne correspond a ton intention. Si tu peux nommer ce que le bloc représente, il existe probablement une balise plus adaptée.

Ce que tu gagnes

Accessibilité : rien. Un <div> est invisible pour les technologies d'assistance. C'est précisément son utilité : il n'ajoute pas de bruit dans l'arbre d'accessibilité.

Exemple de code

<!-- Last resort: no semantic element fits -->
<div class="card-grid">
  <article class="card">
    <h2>First article</h2>
    <p>Content here.</p>
  </article>
  <article class="card">
    <h2>Second article</h2>
    <p>Content here.</p>
  </article>
</div>

Pour aller plus loin