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

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

### 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

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 Standard # the-div-element |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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é