diff options
Diffstat (limited to 'files/fr/web/html/element/div/index.md')
| -rw-r--r-- | files/fr/web/html/element/div/index.md | 144 |
1 files changed, 94 insertions, 50 deletions
diff --git a/files/fr/web/html/element/div/index.md b/files/fr/web/html/element/div/index.md index 1764eb7d29..932f42e8de 100644 --- a/files/fr/web/html/element/div/index.md +++ b/files/fr/web/html/element/div/index.md @@ -14,31 +14,71 @@ tags: translation_of: Web/HTML/Element/div browser-compat: html.elements.div --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<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> +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](/fr/docs/Web/CSS). -<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}} -<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> +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`](/fr/docs/Web/HTML/Global_attributes#attr-class) ou [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id), pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#attr-lang)), etc. <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> + <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> + <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> + <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> + <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> @@ -50,78 +90,82 @@ browser-compat: html.elements.div </tr> <tr> <th scope="row">Interface DOM</th> - <td><a href="/fr/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></td> + <td> + <a href="/fr/docs/Web/API/HTMLDivElement" + ><code>HTMLDivElement</code></a + > + </td> </tr> </tbody> </table> -<h2 id="attributes">Attributs</h2> +## Attributs -<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> +Comme tous les autres éléments HTML, cet élément accepte [les attributs universels](/fr/docs/Web/HTML/Global_attributes). -<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> +> **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](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [les boîtes flexibles (flexbox)](/fr/docs/Glossary/Flexbox)) pour aligner et positionner des éléments `<div>`. -<h2 id="usage_notes">Notes d'utilisation</h2> +## Notes d'utilisation -<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> +- 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>`](/fr/docs/Web/HTML/Element/article) ou [`<nav>`](/fr/docs/Web/HTML/Element/nav)). -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="a_simple_example">Un exemple simple</h3> +### Un exemple simple -<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> +```html +<div> + <p>Tout type de contenu. Par exemple <p>, + <table>. À vous de voir !</p> +</div> +``` -<p>Le résultat ressemble à ceci :</p> +Le résultat ressemble à ceci : -<p>{{EmbedLiveSample("a_simple_example", "", 80)}}</p> +{{EmbedLiveSample("a_simple_example", "", 80)}} -<h3 id="a_styled_example">Un exemple mis en forme</h3> +### Un exemple mis en forme -<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> +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`](/fr/docs/Web/HTML/Global_attributes#attr-class) sur l'élément `<div>` afin d'appliquer la règle `"shadowbox"`. -<h4 id="html">HTML</h4> +#### HTML -<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> +```html +<div class="shadowbox"> + <p>Voici un paragraphe très intéressant inscrit dans une boîte + avec une ombre.</p> +</div> +``` -<h4 id="css">CSS</h4> +#### CSS -<pre class="brush: css">.shadowbox { +```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> +#### Résultat -<p>{{EmbedLiveSample("a_styled_example", "", 150)}}</p> +{{EmbedLiveSample("a_styled_example", "", 150)}} -<h2 id="accessibility_concerns">Accessibilité</h2> +## Accessibilité -<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> +L'élément `<div>` possède un rôle ARIA implicite [`generic`](https://www.w3.org/TR/wai-aria-1.2/#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. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<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> +- Les éléments de sectionnement sémantique : [`<section>`](/fr/docs/Web/HTML/Element/section), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer) +- L'élément [`<span>`](/fr/docs/Web/HTML/Element/span) pour la mise en forme du contenu du phrasé |