From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/div/index.html | 154 +++++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 files/fr/web/html/element/div/index.html (limited to 'files/fr/web/html/element/div') diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html new file mode 100644 index 0000000000..b6371f8dda --- /dev/null +++ b/files/fr/web/html/element/div/index.html @@ -0,0 +1,154 @@ +--- +title: '
: l''élément de division du contenu' +slug: Web/HTML/Element/div +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/div +--- +
{{HTMLRef}}
+ +

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 {{htmlattrxref("class")}} ou {{htmlattrxref("id")}}) ou parce qu'ils partagent des attributs aux valeurs communes, tel que {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}) n'est approprié.

+ +
{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
+ + + +

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 {{HTMLElement("article")}} ou {{HTMLElement("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

+ +

{{EmbedLiveSample("Un_exemple_simple","200","200")}}

+ +

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 {{htmlattrxref("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

+ +

{{EmbedLiveSample("Un_exemple_mis_en_forme", 650, 120)}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu tangible.
Contenu autoriséContenu de flux. Selon le WHATWG, si l'élément parent est un élément {{HTMLElement("dl")}}, un ou plusieurs éléments {{HTMLElement("dt")}} suivis par un ou plusieurs élément {{HTMLElement("dd")}} éventuellement entrecoupés par des éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte un contenu de flux. Selon le WHATWG, un élément {{HTMLElement("dl")}}.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOM{{domxref("HTMLDivElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation.
{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}{{Spec2('HTML5 W3C')}}L'attribut align est désormais considéré obsolète.
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.div")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf