<div> : l'élément de division du contenu
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
L'élément HTML <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 de CSS (par exemple, si la mise en forme lui est appliquée directement, ou si un modèle de mise en page tel que Flexbox est appliqué à son élément parent).
Exemple interactif
<div class="warning">
<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 attributs class ou id, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut lang), etc.
Attributs
Cet élément inclut les attributs universels.
Note :
L'attribut align est désormais obsolète et ne doit plus être appliqué pour un <div>. On privilégiera l'utilisation des propriétés et outils CSS (tels que la grille CSS ou les boîtes flexibles (flexbox)) pour aligner et positionner des éléments <div>.
Notes d'utilisation
Accessibilité
L'élément <div> possède un rôle ARIA implicite generic (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 <p>, <table>. À vous de
voir !
</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'attribut class sur l'élément <div> afin d'appliquer la règle "shadowbox".
HTML
<div class="shadowbox">
<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
| Catégories de contenu | Contenu de flux, contenu tangible. |
|---|---|
| Contenu autorisé |
Contenu de flux. Ou (dans le WHATWG HTML) : Si l'élément parent est un élément <dl> : un ou plusieurs
éléments <dt> suivis d'un ou plusieurs
éléments <dd>, éventuellement mêlés à des
éléments <script> et
éléments <template>.
|
| Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires. |
| Parents autorisés |
Tout élément qui accepte un
contenu de flux. Ou (dans le WHATWG HTML) : un élément <dl>.
|
| Rôle ARIA implicite |
generic
|
| Rôles ARIA autorisés | Tous les rôles sont autorisés. |
| Interface DOM | HTMLDivElement |
Spécifications
| Specification |
|---|
| HTML # the-div-element |