<div> : l'élément de division du contenu

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'élément HTML <div> (ou division) est le conteneur générique du contenu du 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.

Exemple interactif

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.

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éments <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ôle ARIA implicite generic
Rôles ARIA autorisés Tous les rôles sont autorisés.
Interface DOM HTMLDivElement

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 &lt;p&gt;, &lt;table&gt;. À vous de
    voir&nbsp;!
  </p>
</div>

Résultat

must be provided

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

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

CSS

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

must be provided

Accessibilité

L'élément <div> possède un rôle ARIA implicite generic (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.

Spécifications

Specification
HTML
# the-div-element

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
div
align
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.

Voir aussi