diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:12:55 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (patch) | |
| tree | ff7d33fa0a89a11913784bab9d5be39bdb89c04f /files/fr/web/html/element/div/index.html | |
| parent | 44dc182a131ef7c448d53340b7b483ba8b2ee472 (diff) | |
| download | translated-content-8829a7c9eb82f180bac76ed5836aaef95be209a1.tar.gz translated-content-8829a7c9eb82f180bac76ed5836aaef95be209a1.tar.bz2 translated-content-8829a7c9eb82f180bac76ed5836aaef95be209a1.zip | |
move *.html to *.md
Diffstat (limited to 'files/fr/web/html/element/div/index.html')
| -rw-r--r-- | files/fr/web/html/element/div/index.html | 127 |
1 files changed, 0 insertions, 127 deletions
diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html deleted file mode 100644 index 1764eb7d29..0000000000 --- a/files/fr/web/html/element/div/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -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> |
