<div>

Description

L’élément <div> est un conteneur bloc neutre. Il n’apporte aucune signification sémantique et ne crée aucun landmark ARIA. Il est utile pour regrouper des éléments afin d’y appliquer des styles CSS, des animations ou des interactions JavaScript, quand aucun élément sémantique n’est approprié.

Syntaxe

<div class="conteneur">
  <p>Contenu groupé.</p>
</div>

Exemples

Wrapper de mise en page :

<div class="grille">
  <div class="colonne">Colonne 1</div>
  <div class="colonne">Colonne 2</div>
  <div class="colonne">Colonne 3</div>
</div>

Cible JavaScript :

<div id="notification" role="alert" aria-live="polite"></div>

Notes

Privilégier les éléments sémantiques : avant d’utiliser <div>, vérifier si <article>, <section>, <header>, <nav>, <main>, <aside>, <p> ou un autre élément correspond mieux au contenu. La surutilisation de <div> (« divitis ») nuit à l’accessibilité et au référencement.

<div> avec rôle ARIA : si un <div> joue un rôle fonctionnel, lui attribuer explicitement un role ARIA (ex. role="alert", role="dialog").