diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:13:08 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | dea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch) | |
| tree | d20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/element/heading_elements | |
| parent | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff) | |
| download | translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2 translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/html/element/heading_elements')
| -rw-r--r-- | files/fr/web/html/element/heading_elements/index.md | 370 |
1 files changed, 179 insertions, 191 deletions
diff --git a/files/fr/web/html/element/heading_elements/index.md b/files/fr/web/html/element/heading_elements/index.md index f659ec97d0..bd88c0b8ce 100644 --- a/files/fr/web/html/element/heading_elements/index.md +++ b/files/fr/web/html/element/heading_elements/index.md @@ -8,241 +8,229 @@ tags: - Web translation_of: Web/HTML/Element/Heading_Elements --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments <strong><code><h1></code></strong> à <strong><code><h6></code></strong> représentent six niveaux de titres dans un document, <code><h1></code> est le plus important et <code><h6></code> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.</p> +Les éléments **`<h1>`** à **`<h6>`** représentent six niveaux de titres dans un document, `<h1>` est le plus important et `<h6>` est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit. -<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Ces éléments acceptent uniquement les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> (communs à l'ensemble des éléments).</p> +Ces éléments acceptent uniquement les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) (communs à l'ensemble des éléments). -<div class="note"> -<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est obsolète et ne doit pas être utilisé.</p> -</div> +> **Note :** L'attribut **`align`** est obsolète et ne doit pas être utilisé. -<h2 id="Notes_dutilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<ul> - <li>L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.</li> - <li>Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place.</li> - <li>On évitera de sauter des niveaux de titre : on commence toujours par <code><h1></code> puis <code><h2></code> et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page.</li> - <li>Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément <code><h1></code> sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs <code><h1></code>. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations.</li> -</ul> +- L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document. +- Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place. +- On évitera de sauter des niveaux de titre : on commence toujours par `<h1>` puis `<h2>` et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page. +- Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément `<h1>` sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs `<h1>`. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Tous_les_titres">Tous les titres</h3> +### Tous les titres -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><h1>Titre de niveau 1</h1> -<h2>Titre de niveau 2</h2> -<h3>Titre de niveau 3</h3> -<h4>Titre de niveau 4</h4> -<h5>Titre de niveau 5</h5> -<h6>Titre de niveau 6</h6> -</pre> +```html +<h1>Titre de niveau 1</h1> +<h2>Titre de niveau 2</h2> +<h3>Titre de niveau 3</h3> +<h4>Titre de niveau 4</h4> +<h5>Titre de niveau 5</h5> +<h6>Titre de niveau 6</h6> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Tous_les_titres","280","300")}}</p> +{{EmbedLiveSample("Tous_les_titres","280","300")}} -<h3 id="Exemple_de_page">Exemple de page</h3> +### Exemple de page -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><h1>Élément de titre</h1> -<h2>Présentation</h2> -<p>Du texte...</p> +```html +<h1>Élément de titre</h1> +<h2>Présentation</h2> +<p>Du texte...</p> -<h2>Exemples</h2> -<h3>Exemple 1</h3> -<p>Du texte...</p> +<h2>Exemples</h2> +<h3>Exemple 1</h3> +<p>Du texte...</p> -<h3>Exemple 2</h3> -<p>Du texte...</p> +<h3>Exemple 2</h3> +<p>Du texte...</p> -<h2>Voir également</h2> -<p>Du texte...</p> -</pre> +<h2>Voir également</h2> +<p>Du texte...</p> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Exemple_de_page","280","480")}}</p> +{{EmbedLiveSample("Exemple_de_page","280","480")}} -<h2 id="Accessibilité">Accessibilité</h2> +## Accessibilité -<h3 id="Navigation">Navigation</h3> +### Navigation -<p>Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.</p> +Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé. -<h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4> +#### Mauvaises pratiques -<pre class="brush: html example-bad"><h1>Heading level 1</h1> -<h3>Heading level 3</h3> -<h4>Heading level 4</h4> -</pre> +```html example-bad +<h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +``` -<h4 id="Bonnes_pratiques">Bonnes pratiques</h4> +#### Bonnes pratiques -<pre class="brush: html example-good"><h1>Heading level 1</h1> -<h2>Heading level 2</h2> -<h3>Heading level 3</h3> -</pre> +```html example-good +<h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +``` -<h4 id="Imbrication">Imbrication</h4> +#### Imbrication -<p>Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :</p> +Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu : -<ol> - <li><code>h1</code> Les abeilles +1. `h1` Les abeilles - <ol> - <li><code>h2</code> Étymologie</li> - <li><code>h2</code> Répartition</li> - <li><code>h2</code> Évolution - <ol> - <li><code>h3</code> Paléozoïque ancien</li> - <li><code>h3</code> Jurassique</li> - <li><code>h3</code> Crétacée</li> - </ol> - </li> - <li><code>h2</code> Morphologie externe - <ol> - <li><code>h3</code>Tête - <ol> - <li><code>h4</code> Mandibules</li> - </ol> - </li> - <li><code>h3</code> Thorax - <ol> - <li><code>h4</code> Prothorax</li> - <li><code>h4</code> Ptérothorax</li> - </ol> - </li> - <li><code>h3</code> Pattes</li> - <li><code>h3</code> Ailes</li> - <li><code>h3</code> Abdomen</li> - </ol> - </li> - </ol> - </li> -</ol> + 1. `h2` Étymologie + 2. `h2` Répartition + 3. `h2` Évolution -<p>Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on <strong>ferme</strong> une sous-section</p> + 1. `h3` Paléozoïque ancien + 2. `h3` Jurassique + 3. `h3` Crétacée -<ul> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are"> Comprendre les règles WCAG 2.4</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html"><em>Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html"><em>Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> -</ul> + 4. `h2` Morphologie externe -<h3 id="Libeller_une_section">Libeller une section</h3> + 1. `h3`Tête -<p>Les outils comme les lecteurs d'écran peuvent également générer une liste du <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">contenu sectionnant</a> afin de déterminer le plan de la page.</p> + 1. `h4` Mandibules -<p>Le contenu sectionnant peut être libellé en combinant les attributs <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.</p> + 2. `h3` Thorax -<h4 id="Exemple">Exemple</h4> + 1. `h4` Prothorax + 2. `h4` Ptérothorax -<pre class="brush: html"><header> - <nav aria-labelledby="primary-navigation"> - <h2 id="primary-navigation">Outils de navigation</h2> - <!-- éléments relatifs à la navigation --> - </nav> -</header> - -<!-- contenu de la page --> - -<footer> - <nav aria-labelledby="footer-navigation"> - <h2 id="footer-navigation">Navigation dans le pied de page</h2> - <!-- éléments relatifs à la navigation --> - </nav> -</footer> -</pre> - -<p>Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément <code>nav</code> afin d'en déterminer l'objectif.</p> - -<ul> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li> - <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby"><em>Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web</em> (en anglais)</a></li> -</ul> - -<h2 id="Résumé_technique">Résumé technique</h2> + 3. `h3` Pattes + 4. `h3` Ailes + 5. `h3` Abdomen + +Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on **ferme** une sous-section + +- [Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)](https://www.w3.org/WAI/tutorials/page-structure/headings/) +- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways) +- [ Comprendre les règles WCAG 2.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are) +- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) +- [_Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html) +- [_Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html) +- [_Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html) + +### Libeller une section + +Les outils comme les lecteurs d'écran peuvent également générer une liste du [contenu sectionnant](/en-US/docs/Web/HTML/Element#Content_sectioning) afin de déterminer le plan de la page. + +Le contenu sectionnant peut être libellé en combinant les attributs [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants. + +#### Exemple + +```html +<header> + <nav aria-labelledby="primary-navigation"> + <h2 id="primary-navigation">Outils de navigation</h2> + <!-- éléments relatifs à la navigation --> + </nav> +</header> + +<!-- contenu de la page --> + +<footer> + <nav aria-labelledby="footer-navigation"> + <h2 id="footer-navigation">Navigation dans le pied de page</h2> + <!-- éléments relatifs à la navigation --> + </nav> +</footer> +``` + +Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément `nav` afin d'en déterminer l'objectif. + +- [Utiliser l'attribut `aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- [_Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web_ (en anglais)](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby) + +## Résumé technique <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>, contenu de titre, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte le <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ; n'utilisez pas de titre comme enfant d'un élément {{HTMLElement("hgroup")}}, c'est à présent obsolète.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLHeadingElement")}}</td> - </tr> - </tbody> + <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 + >, contenu de titre, + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible" + >contenu tangible</a + >. + </td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" + >Contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Tout élément qui accepte le + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" + >contenu de flux</a + > + ; n'utilisez pas de titre comme enfant d'un élément + {{HTMLElement("hgroup")}}, c'est à présent obsolète. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLHeadingElement")}}</td> + </tr> + </tbody> </table> -<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', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}} | {{Spec2('HTML4.01')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.h1")}}</p> +{{Compat("html.elements.h1")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("p")}}</li> - <li>{{HTMLElement("div")}}</li> - <li>{{HTMLElement("section")}}</li> -</ul> +- {{HTMLElement("p")}} +- {{HTMLElement("div")}} +- {{HTMLElement("section")}} |