--- title: '

-

: 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 ---
{{HTMLRef}}

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.

{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}

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 https://github.com/mdn/interactive-examples et à envoyer une pull request !

Attributs

Ces éléments acceptent uniquement les attributs universels (communs à l'ensemble des éléments).

Note : L'attribut align est obsolète et ne doit pas être utilisé.

Notes d'utilisation

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.

Exemples

Tous les titres

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>

Résultat

Exemple de page

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>

<h3>Exemple 2</h3>
<p>Du texte...</p>

<h2>Voir également</h2>
<p>Du texte...</p>

Résultat

Accessibilité

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é.

Mauvaises pratiques

<h1>Heading level 1</h1>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>

Bonnes pratiques

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>

Imbrication

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 :

h1 Les abeilles
1. h2 Étymologie
2. h2 Répartition
3. h2 Évolution
  1. h3 Paléozoïque ancien
  2. h3 Jurassique
  3. h3 Crétacée
4. h2 Morphologie externe
  1. h3Tête
    1. h4 Mandibules
  2. h3 Thorax
    1. h4 Prothorax
    2. h4 Ptérothorax
  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

Libeller une section

Les outils comme les lecteurs d'écran peuvent également générer une liste du contenu sectionnant afin de déterminer le plan de la page.

Le contenu sectionnant peut être libellé en combinant les attributs aria-labelledby 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

<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.

Résumé technique

Catégories de contenu	Contenu de flux, contenu de titre, contenu tangible.
Contenu autorisé	Contenu phrasé.
Omission de balise	{{no_tag_omission}}
Parents autorisés	Tout élément qui accepte le contenu de flux ; n'utilisez pas de titre comme enfant d'un élément {{HTMLElement("hgroup")}}, c'est à présent obsolète.
Rôles ARIA autorisés	{{ARIARole("tab")}}, {{ARIARole("presentation")}}
Interface DOM	{{domxref("HTMLHeadingElement")}}

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')}}

Compatibilité des navigateurs

Voir aussi

{{HTMLElement("p")}}
{{HTMLElement("div")}}
{{HTMLElement("section")}}