diff options
Diffstat (limited to 'files/fr/web/html/element/div/index.html')
| -rw-r--r-- | files/fr/web/html/element/div/index.html | 172 |
1 files changed, 73 insertions, 99 deletions
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: '<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> (qui signifie <em>division du document</em>) 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é.</p> +<p class="summary">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 class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> +<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> -<h2 id="Attributs">Attributs</h2> +<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/Attributs_universels">les attributs universels</a>.</p> +<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/Glossaire/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> + <p><b>Note :</b></p> + <p>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="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<p>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 {{HTMLElement("article")}} ou {{HTMLElement("nav")}}).</p> - -<h2 id="Exemples">Exemples</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> -<h3 id="Un_exemple_simple">Un exemple simple</h3> +<h2 id="examples">Exemples</h2> -<h4 id="HTML">HTML</h4> +<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>Tout type de contenu. Par exemple &lt;p&gt;, + &lt;table&gt;. À vous de voir&nbsp;!</p> +</div></pre> -<h4 id="Résultat">Résultat</h4> +<p>Le résultat ressemble à ceci :</p> -<p>{{EmbedLiveSample("Un_exemple_simple","200","200")}}</p> +<p>{{EmbedLiveSample("a_simple_example", "", 80)}}</p> -<h3 id="Un_exemple_mis_en_forme">Un exemple mis en forme</h3> +<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 {{htmlattrxref("class")}} sur l'élément <code><div></code> afin d'appliquer la règle <code>"shadowbox"</code>.</p> +<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_2">HTML</h4> +<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> + <p>Voici un paragraphe très intéressant inscrit dans une boîte + avec une ombre.</p> </div></pre> -<h4 id="CSS">CSS</h4> +<h4 id="css">CSS</h4> <pre class="brush: css">.shadowbox { width: 15em; @@ -68,87 +104,25 @@ translation_of: Web/HTML/Element/div background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }</pre> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Un_exemple_mis_en_forme", 650, 120)}}</p> +<p>{{EmbedLiveSample("a_styled_example", "", 150)}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>. 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")}}.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément qui accepte un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Selon le WHATWG, un élément {{HTMLElement("dl")}}.</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>{{domxref("HTMLDivElement")}}</td> - </tr> - </tbody> -</table> +<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="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucune modification depuis la dernière dérivation.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>L'attribut <strong><code>align</code></strong> est désormais considéré obsolète.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.div")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les éléments dont la sémantique est liée au sectionnement du document : - <ul> - <li>{{HTMLElement("section")}}</li> - <li>{{HTMLElement("article")}}</li> - <li>{{HTMLElement("nav")}}</li> - <li>{{HTMLElement("header")}}</li> - <li>{{HTMLElement("footer")}}.</li> - </ul> - </li> - <li>{{HTMLElement("span")}} pour mettre en forme un contenu phrasé.</li> + <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> |