diff options
Diffstat (limited to 'files/fr/web/html/element/aside/index.md')
| -rw-r--r-- | files/fr/web/html/element/aside/index.md | 128 |
1 files changed, 87 insertions, 41 deletions
diff --git a/files/fr/web/html/element/aside/index.md b/files/fr/web/html/element/aside/index.md index 07961c0af4..072a44e523 100644 --- a/files/fr/web/html/element/aside/index.md +++ b/files/fr/web/html/element/aside/index.md @@ -14,89 +14,135 @@ tags: translation_of: Web/HTML/Element/aside browser-compat: html.elements.aside --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>L'élément <strong><code><aside></code></strong> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> +L'élément **`<aside>`** (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende. -<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}} <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#sectioning_content">contenu de section</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#sectioning_content" + >contenu de section</a + >, + <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content" + >contenu tangible</a + >. + </td> </tr> <tr> <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + <td> + <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + >Contenu de flux</a + >. + </td> </tr> <tr> <th scope="row"><dfn>Omission de balises</dfn></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"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Notez qu'un élément <code><aside></code> ne doit pas être un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a>.</td> + <td> + Tout élément acceptant du + <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" + >contenu de flux</a + >. Notez qu'un élément <code><aside></code> ne doit pas être un + descendant d'un élément + <a href="/fr/docs/Web/HTML/Element/address" + ><code><address></code></a + >. + </td> </tr> <tr> <th scope="row">Rôle ARIA implicite</th> - <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td> + <td> + <code + ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role" + >complementary</a + ></code + > + </td> </tr> <tr> <th scope="row">Rôles ARIA autorisés</th> - <td><a href="https://w3c.github.io/aria/#feed">feed</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#note">note</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#region">region</a>, <a href="https://w3c.github.io/aria/#search">search</a></td> + <td> + <a href="https://w3c.github.io/aria/#feed">feed</a>, + <a href="https://w3c.github.io/aria/#none">none</a>, + <a href="https://w3c.github.io/aria/#note">note</a>, + <a href="https://w3c.github.io/aria/#presentation">presentation</a>, + <a href="https://w3c.github.io/aria/#region">region</a>, + <a href="https://w3c.github.io/aria/#search">search</a> + </td> </tr> <tr> <th scope="row">Interface DOM</th> - <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + <td> + <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> + </td> </tr> </tbody> </table> -<h2 id="attributes">Attributs</h2> +## Attributs -<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> +Cet élément ne comprend que les [attributs universels](/fr/docs/Web/HTML/Global_attributes). -<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2> +## **Notes d'utilisation** -<p>On ne doit pas utiliser l'élément <code><aside></code> pour marquer du texte entre parenthèses, ce type de texte est considéré comme faisant partie du flux principal.</p> +On ne doit pas utiliser l'élément `<aside>` pour marquer du texte entre parenthèses, ce type de texte est considéré comme faisant partie du flux principal. -<h2 id="example">Exemple</h2> +## Exemple -<p>Dans cet exemple, on utilise <code><aside></code> afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.</p> +Dans cet exemple, on utilise `<aside>` afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément. -<pre class="brush: html"><article> - <p> - Le film Disney <cite>La petite Sirène</cite> est +```html +<article> + <p> + Le film Disney <cite>La petite Sirène</cite> est sorti en salles en 1989. - </p> - <aside> - <p> + </p> + <aside> + <p> Le film a gagné 87 millions de dollars pendant sa sortie initiale. - </p> - </aside> - <p> + </p> + </aside> + <p> Plus d'informations sur le film… - </p> -</article> -</pre> + </p> +</article> +``` -<h3 id="result">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("example", "100%", 150)}}</p> +{{EmbedLiveSample("example", "100%", 150)}} -<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 autres éléments en rapport avec les sections : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></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>, <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Structures et sections d'un document HTML5</a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li> -</ul> +- Les autres éléments en rapport avec les sections : [`<body>`](/fr/docs/Web/HTML/Element/body), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer), [`<address>`](/fr/docs/Web/HTML/Element/address) +- [Structures et sections d'un document HTML5](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines) +- [ARIA : le rôle `complementary`](/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role) |