1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
title: '<div> : l''élément de division du contenu'
slug: Web/HTML/Element/div
tags:
- Content Division
- Element
- HTML
- HTML grouping content
- HTML:Flow content
- Layout
- Reference
- Web
- div
translation_of: Web/HTML/Element/div
browser-compat: html.elements.div
---
{{HTMLRef}}
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](/fr/docs/Web/CSS).
{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
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`](/fr/docs/Web/HTML/Global_attributes#attr-class) ou [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id), pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#attr-lang)), etc.
<table class="properties">
<tbody>
<tr>
<th scope="row">
<dfn
><a href="/fr/docs/Web/Guide/HTML/Content_categories"
>Catégories de contenu</a
></dfn
>
</th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
>Contenu de flux</a
>,
<a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
>contenu tangible</a
>.
</td>
</tr>
<tr>
<th scope="row">Contenu autorisé</th>
<td>
<a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
>Contenu de flux</a
>. Selon le WHATWG, si l'élément parent est un élément
<a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a
>, un ou plusieurs éléments
<a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> suivis
par un ou plusieurs éléments
<a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>
éventuellement entrecoupés par des éléments
<a href="/fr/docs/Web/HTML/Element/script"
><code><script></code></a
>
ou
<a href="/fr/docs/Web/HTML/Element/template"
><code><template></code></a
>.
</td>
</tr>
<tr>
<th scope="row">Omission de balises</th>
<td>
Aucune, la balise d'ouverture et la balise de fermeture sont
obligatoires.
</td>
</tr>
<tr>
<th scope="row">Parents autorisés</th>
<td>
Tout élément qui accepte un
<a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
>contenu de flux</a
>. Selon le WHATWG, un élément
<a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a
>.
</td>
</tr>
<tr>
<th scope="row">Rôle ARIA implicite</th>
<td><a href="https://www.w3.org/TR/wai-aria-1.2/#generic">generic</a></td>
</tr>
<tr>
<th scope="row">Rôles ARIA autorisés</th>
<td>Tous les rôles sont autorisés.</td>
</tr>
<tr>
<th scope="row">Interface DOM</th>
<td>
<a href="/fr/docs/Web/API/HTMLDivElement"
><code>HTMLDivElement</code></a
>
</td>
</tr>
</tbody>
</table>
## Attributs
Comme tous les autres éléments HTML, cet élément accepte [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
> **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](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [les boîtes flexibles (flexbox)](/fr/docs/Glossary/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>`](/fr/docs/Web/HTML/Element/article) ou [`<nav>`](/fr/docs/Web/HTML/Element/nav)).
## Exemples
### Un exemple simple
```html
<div>
<p>Tout type de contenu. Par exemple <p>,
<table>. À vous de voir !</p>
</div>
```
Le résultat ressemble à ceci :
{{EmbedLiveSample("a_simple_example", "", 80)}}
### 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`](/fr/docs/Web/HTML/Global_attributes#attr-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
{{EmbedLiveSample("a_styled_example", "", 150)}}
## Accessibilité
L'élément `<div>` possède un rôle ARIA implicite [`generic`](https://www.w3.org/TR/wai-aria-1.2/#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
{{Specifications}}
## Compatibilité des navigateurs
{{Compat}}
## Voir aussi
- Les éléments de sectionnement sémantique : [`<section>`](/fr/docs/Web/HTML/Element/section), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer)
- L'élément [`<span>`](/fr/docs/Web/HTML/Element/span) pour la mise en forme du contenu du phrasé
|
