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
|
---
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
---
<div>{{HTMLRef}}</div>
<p>L'élément HTML <strong><code><div></code></strong> (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 <a href="/fr/docs/Web/CSS">CSS</a>.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
<p>En tant que conteneur « pur », l'élément <code><div></code> 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 <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> ou <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-lang"><code>lang</code></a>), etc.</p>
<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>
<h2 id="attributes">Attributs</h2>
<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
<div class="note">
<p><strong>Note :</strong>L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossary/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p>
</div>
<h2 id="usage_notes">Notes d'utilisation</h2>
<ul>
<li>L'élément <code><div></code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> ou <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>).</li>
</ul>
<h2 id="examples">Exemples</h2>
<h3 id="a_simple_example">Un exemple simple</h3>
<pre class="brush: html"><div>
<p>Tout type de contenu. Par exemple &lt;p&gt;,
&lt;table&gt;. À vous de voir&nbsp;!</p>
</div></pre>
<p>Le résultat ressemble à ceci :</p>
<p>{{EmbedLiveSample("a_simple_example", "", 80)}}</p>
<h3 id="a_styled_example">Un exemple mis en forme</h3>
<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code><div></code>. On notera l'utilisation de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code><div></code> afin d'appliquer la règle <code>"shadowbox"</code>.</p>
<h4 id="html">HTML</h4>
<pre class="brush: html"><div class="shadowbox">
<p>Voici un paragraphe très intéressant inscrit dans une boîte
avec une ombre.</p>
</div></pre>
<h4 id="css">CSS</h4>
<pre class="brush: 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);
}</pre>
<h4 id="result">Résultat</h4>
<p>{{EmbedLiveSample("a_styled_example", "", 150)}}</p>
<h2 id="accessibility_concerns">Accessibilité</h2>
<p>L'élément <code><div></code> possède un rôle ARIA implicite <a href="https://www.w3.org/TR/wai-aria-1.2/#generic"><code>generic</code></a> (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.</p>
<h2 id="specifications">Spécifications</h2>
<p>{{Specifications}}</p>
<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat}}</p>
<h2 id="see_also">Voir aussi</h2>
<ul>
<li>Les éléments de sectionnement sémantique : <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a></li>
<li>L'élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> pour la mise en forme du contenu du phrasé</li>
</ul>
|