diff options
Diffstat (limited to 'files/fr/web/html/element/heading_elements')
| -rw-r--r-- | files/fr/web/html/element/heading_elements/index.html | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/files/fr/web/html/element/heading_elements/index.html b/files/fr/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..764d5a89be --- /dev/null +++ b/files/fr/web/html/element/heading_elements/index.html @@ -0,0 +1,252 @@ +--- +title: '<h1>-<h6> : les éléments de titre de section' +slug: Web/HTML/Element/Heading_Elements +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.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> + +<h2 id="Attributs">Attributs</h2> + +<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> + +<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> + +<h2 id="Notes_dutilisation">Notes d'utilisation</h2> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Tous_les_titres">Tous les titres</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Tous_les_titres","280","300")}}</p> + +<h3 id="Exemple_de_page">Exemple de page</h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><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> + +<h3>Exemple 2</h3> +<p>Du texte...</p> + +<h2>Voir également</h2> +<p>Du texte...</p> +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Exemple_de_page","280","480")}}</p> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Navigation">Navigation</h3> + +<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> + +<h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4> + +<pre class="brush: html example-bad notranslate"><h1>Heading level 1</h1> +<h3>Heading level 3</h3> +<h4>Heading level 4</h4> +</pre> + +<h4 id="Bonnes_pratiques">Bonnes pratiques</h4> + +<pre class="brush: html example-good notranslate"><h1>Heading level 1</h1> +<h2>Heading level 2</h2> +<h3>Heading level 3</h3> +</pre> + +<h4 id="Imbrication">Imbrication</h4> + +<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> + +<ol> + <li><code>h1</code> 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> + +<p>Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on <strong>ferme</strong> une sous-section</p> + +<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> + +<h3 id="Libeller_une_section">Libeller une section</h3> + +<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> + +<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> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: html notranslate"><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> + +<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> +</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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<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> + +<p>{{Compat("html.elements.h1")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{HTMLElement("p")}}</li> + <li>{{HTMLElement("div")}}</li> + <li>{{HTMLElement("section")}}</li> +</ul> |