L'élément HTML <div>
(qui signifie division du document) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs class
ou id
) ou parce qu'ils partagent des attributs aux valeurs communes, tel que lang
. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple <article>
ou <nav>
) n'est approprié.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Attributs
Comme tous les autres éléments HTML, cet élément accepte 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
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>
).
Exemples
Un exemple simple
HTML
<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. Selon le WHATWG, si l'élément parent est un élément <dl> , un ou plusieurs éléments <dt> suivis par un ou plusieurs élément <dd> éventuellement entrecoupés par des éléments <script> ou <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. Selon le WHATWG, un élément <dl> . |
Rôles ARIA autorisés | Tous les rôles sont autorisés. |
Interface DOM | HTMLDivElement |
Spécifications
Spécification | État | Commentaires |
---|---|---|
HTML Living Standard La définition de '<div>' dans cette spécification. |
Standard évolutif | Aucune modification depuis la dernière dérivation. |
HTML5 La définition de '<div>' dans cette spécification. |
Recommendation | L'attribut align est désormais considéré obsolète. |
HTML 4.01 Specification La définition de '<div>' dans cette spécification. |
Recommendation |
Compatibilité des navigateurs
BCD tables only load in the browser