From a47584de1bd47788cb5aa6178fa88b31977b2a8e Mon Sep 17 00:00:00 2001 From: tristantheb Date: Sat, 19 Jun 2021 10:25:05 +0200 Subject: UPDATE: Update translation of the HTML elements — 🛠 Priority work area (#500) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * UPDATE: Updating pages starting with A * FIX: Update missing KS to html anchor * Review HTML Element a * Review HTML Element abbr * Review HTML Element acronym * Review HTML Element address * Review HTML Element applet * Review HTML Element area * Review HTML Element article * Review HTML Element aside * Review HTML Element audio * UPDATE: Updating pages wtarting with B * Review HTML Element b * Review HTML Element base * Review HTML Element basefont * Review HTML Element bdi * Review HTML Element bdo * Review HTML Element big * Review HTML Element blink * Review HTML Element blockquote * Review HTML Element body * Review HTML Element br * Review HTML Element button * Review HTML Element button - rm HTMLRef * Review HTML Element button - lint link * UPDATE: Updating pages starting with C * UPDATE: Updating pages starting with D * UPDATE: Refresh the reference page * UPDATE: Updating pages starting with E * Review HTML Element canvas * Review HTML Element caption * Review HTML Element center * Review HTML Element cite * UPDATE: Updating pages starting with F * BCD: Update all updated pages with new BCD format * FIX: add missing bracket * Review - HTML element - code * Review - HTML Element - col * Review - HTML Element - colgroup * Review - HTML Element - content * Review - HTML Element - data * Review - HTML Element - datalist * Review - HTML Element - dd * Review - HTML Element - del * Review - HTML Element * Review - HTML Element - dfn * Review - HTML Element - dialog * Review - HTML element - dir * Review - HTML Element div * Review - HTML Element - dl * Review - HTML Element - dt * Review - HTML Element - em * Review - HTML Element - embed * Review - HTML Element - fieldset * Review - HTML Element - figcaption * Review - HTML Element - figure * Review - HTML Element - font * Review - HTML Element - footer * Review - HTML Element - form * Review - HTML Element - frame * Review - HTML Element - frameset * Review updates since PR start - A * Review updates since PR start - B * Review updates since PR start - C * Review updates since PR start - D * Review updates since PR start - F Co-authored-by: julieng --- files/fr/web/html/element/div/index.html | 172 +++++++++++++------------------ 1 file changed, 73 insertions(+), 99 deletions(-) (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 index b6371f8dda..35b092a859 100644 --- a/files/fr/web/html/element/div/index.html +++ b/files/fr/web/html/element/div/index.html @@ -2,63 +2,99 @@ title: '
: 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> (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é.

+

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.

{{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 ou id, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut lang), etc.

-

Attributs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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 <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 balisesAucune, la balise d'ouverture et la balise de fermeture sont obligatoires.
Parents autorisésTout élément qui accepte un contenu de flux. Selon le WHATWG, un élément <dl>.
Rôle ARIA implicitegeneric
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOMHTMLDivElement
+ +

Attributs

-

Comme tous les autres éléments HTML, cet élément accepte les attributs universels.

+

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

+

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

+

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

+
    +
  • 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>).
    • +
-

Un exemple simple

+

Exemples

-

HTML

+

Un exemple simple

<div>
-  <p>
-     Tout type de contenu. Par exemple
-     &lt;p&gt;, &lt;table&gt;. À vous
-     de voir&nbsp;!
-  </p>
-</div>
-
+ <p>Tout type de contenu. Par exemple &lt;p&gt;, + &lt;table&gt;. À vous de voir&nbsp;!</p> +</div> -

Résultat

+

Le résultat ressemble à ceci :

-

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

+

{{EmbedLiveSample("a_simple_example", "", 80)}}

-

Un exemple mis en forme

+

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".

+

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>
+  <p>Voici un paragraphe très intéressant inscrit dans une boîte
+  avec une ombre.</p>
 </div>
-

CSS

+

CSS

.shadowbox {
   width: 15em;
@@ -68,87 +104,25 @@ translation_of: Web/HTML/Element/div
   background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
 }
-

Résultat

+

Résultat

-

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

+

{{EmbedLiveSample("a_styled_example", "", 150)}}

-

Résumé technique

+

Accessibilité

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
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")}}
+

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

- - - - - - - - - - - - - - - - - - - - - - - - - - -
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')}} 
+

Spécifications

-

Compatibilité des navigateurs

+

{{Specifications}}

- +

Compatibilité des navigateurs

-

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

+

{{Compat}}

-

Voir aussi

+

Voir aussi

    -
  • Les éléments dont la sémantique est liée au sectionnement du document : -
      -
    • {{HTMLElement("section")}}
      • -
    • {{HTMLElement("article")}}
      • -
    • {{HTMLElement("nav")}}
      • -
    • {{HTMLElement("header")}}
      • -
    • {{HTMLElement("footer")}}.
      • -
    -
    • -
  • {{HTMLElement("span")}} pour mettre en forme un contenu phrasé.
    • +
  • 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é
-- cgit v1.2.3-54-g00ecf