L'élémentHTML<div> est le conteneur générique du contenu de flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide deCSS (par exemple, si la mise en forme lui est appliquée directement, ou si un modèle de mise en page tel queFlexbox est appliqué à son élément parent).

Exemple interactif

<div>  <img    src="/shared-assets/images/examples/leopard.jpg"    alt="Un léopard intimidant." />  <p>Attention au léopard</p></div>

.warning {  border: 10px ridge red;  background-color: yellow;  padding: 0.5rem;  display: flex;  flex-direction: column;}.warning img {  width: 100%;}.warning p {  font: small-caps bold 1.2rem sans-serif;  text-align: center;}

En tant que conteneur « pur », l'élément<div> ne représente rien en soi. Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributsclass ouid, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attributlang), etc.

Attributs

Cet élément inclut lesattributs universels.

Notes d'utilisation

• L'élément<div> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple<article> ou<nav>).

Accessibilité

L'élément<div> possèdeun rôle ARIA implicitegeneric^(angl.) (plutôt qu'aucun rôle). Cela peut avoir un impact sur certaines combinaisons de déclarations ARIA qui nécessitent un élément descendant direct avec un rôle donné pour fonctionner correctement.

Exemples

Un exemple simple

<div>  <p>    Tout type de contenu. Par exemple &lt;p&gt;, &lt;table&gt;. À vous de    voir&nbsp;!  </p></div>

Résultat

Un exemple mis en forme

Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément<div>. On notera l'utilisation de l'attributclass sur l'élément<div> afin d'appliquer la règle"shadowbox".

HTML

<div>  <p>    Voici un paragraphe très intéressant inscrit dans une boîte avec une ombre.  </p></div>

CSS

.shadowbox {  width: 15em;  border: 1px solid #333;  box-shadow: 8px 8px 5px #444;  padding: 8px 12px;  background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);}

Résultat

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les éléments de sectionnement sémantique :<section>,<article>,<nav>,<header>,<footer>
• L'élément<span> pour la mise en forme du contenu du phrasé