Titres HTML
Un titre structure une page et aide les moteurs de recherche à indexer son contenu. Découvrez les niveaux, la taille et l'importance des titres HTML.
Les titres divisent une page en sections étiquetées et hiérarchisées, de la même façon que les titres de chapitres et de sections organisent un livre. En HTML, il existe six niveaux, de <h1> (le plus important) à <h6> (le moins important). Choisir le bon niveau ne sert pas seulement à agrandir le texte : cela définit le plan du document sur lequel s'appuient les navigateurs, les technologies d'assistance et les moteurs de recherche pour comprendre l'organisation de votre contenu.
Cette page présente les six balises de titre, la façon dont leurs niveaux s'imbriquent en hiérarchie, pourquoi la taille et le niveau sont deux notions distinctes, comment les utilisateurs de lecteurs d'écran naviguent par les titres, et en quoi l'élément <header> diffère des balises <h1>–<h6>.
Balises de titre
Il existe 6 niveaux de titres en HTML : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Les balises <h1> - <h6> servent à marquer les titres selon leur importance. La balise <h1> représente le titre le plus important de la page web, tandis que <h6> représente le moins important et le plus petit.
Exemple de balises de titre HTML <h1> - <h6> :
Comment utiliser les balises HTML <h1>-<h6> ?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Pour la référence complète de chaque niveau, consultez les balises HTML <h1>–<h6>.
Hiérarchie des titres et plan du document
Les niveaux de titres ne sont pas de simples tailles — ils décrivent une imbrication. Un <h2> est interprété comme une sous-section du <h1> qui le précède, un <h3> est une sous-section de ce <h2>, et ainsi de suite. Ensemble, ces niveaux imbriqués forment le plan du document : une arborescence qui indique quelles parties de la page appartiennent à quoi.
Pensez-y comme à une table des matières :
<h1>Baking Bread</h1> <!-- the page topic -->
<h2>Ingredients</h2> <!-- a section of "Baking Bread" -->
<h2>Method</h2> <!-- another section -->
<h3>Kneading</h3> <!-- a step inside "Method" -->
<h3>Proving</h3> <!-- another step inside "Method" -->
<h2>Troubleshooting</h2>L'indentation ci-dessus n'est là qu'à titre d'illustration — les titres sont des éléments frères dans le balisage, et ce sont les numéros de niveau qui créent la hiérarchie. Utilisez un seul <h1> pour le sujet principal de la page, puis <h2> pour ses sections de premier niveau, <h3> pour les sous-sections correspondantes, et ne descendez jamais d'un niveau simplement pour réduire la taille du texte.
Accessibilité : ne sautez pas de niveaux de titre
Les utilisateurs de lecteurs d'écran lisent rarement une page de haut en bas. Ils affichent plutôt la liste de tous les titres et sautent directement à la section souhaitée, un peu comme on parcourt une table des matières. Cela ne fonctionne que si les niveaux descendent dans l'ordre — <h1>, puis <h2>, puis <h3> — sans lacunes.
Sauter un niveau (par exemple, un <h1> suivi directement d'un <h3>) casse le plan : la technologie d'assistance signale un niveau manquant, et les utilisateurs ne savent plus s'ils ont sauté dans une sous-section ou s'ils ont perdu leur repère.
Mauvais — un niveau est sauté :
<h1>Our Menu</h1>
<h3>Starters</h3> <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>Bon — les niveaux descendent un à un :
<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>Si un titre paraît trop grand ou trop petit à son niveau correct, modifiez son apparence avec CSS — pas le niveau.
Importance des titres
- Les titres HTML mettent en évidence les sujets importants et la structure du document, améliorant ainsi l'engagement des utilisateurs.
- N'utilisez qu'une seule balise
<h1>par page web. Elle doit décrire le contenu de votre page et inclure un mot-clé pour améliorer le classement dans Google. - Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de la page web.
Taille des titres
Les navigateurs attribuent à chaque niveau de titre une taille par défaut : <h1> est le plus grand et <h6> le plus petit. Vous pouvez remplacer ces valeurs avec la propriété CSS font-size.
Point essentiel : modifier la taille visuelle d'un titre ne change pas son niveau sémantique. Un <h2> stylisé pour paraître énorme reste un <h2> dans le plan, et un <h1> minuscule reste le titre de premier niveau de la page. Choisissez donc la balise en fonction de sa place dans la hiérarchie, puis adaptez sa taille aux exigences du design — ne choisissez jamais une balise parce que son rendu est plus grand ou plus petit.
Exemple de modification de la taille d'un titre avec la propriété font-size :
Comment styliser une balise HTML <h1> avec la propriété CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Remarques importantes
- N'utilisez pas les balises de titre pour augmenter la taille du texte ou le mettre en gras. Préférez les propriétés CSS comme font-weight et font-size. Rappelons que les moteurs de recherche utilisent les titres pour structurer le contenu.
- Ne sautez pas de niveaux de titre. Utilisez
<h1>comme titre principal de la page, suivi des titres<h2>, puis des titres<h3>moins importants, etc. - Évitez d'utiliser
<h1>plus d'une fois par page.
Éléments connexes
Quelques balises sont fréquemment utilisées aux côtés des titres mais appartiennent à leurs propres sujets :
- La balise
<hr>trace une rupture thématique entre les sections de contenu. - L'élément
<head>contient les métadonnées de la page (titre, jeu de caractères, styles, scripts) et ne fait pas partie du contenu visible.
Titre de section vs. en-tête : <h1>–<h6> vs. <header>
Ces deux éléments sont faciles à confondre car leurs noms se ressemblent, mais ils remplissent des rôles différents :
- Un titre de section (
<h1>–<h6>) est un titre unique qui étiquète une section de contenu et lui attribue un rang dans le plan du document. - Un en-tête (
<header>) est un conteneur pour le contenu introductif en haut d'une page ou d'une section — généralement un logo, le titre du site et la navigation. Il contient souvent un titre de section, mais n'en est pas un lui-même.
Comparons-les côte à côte :
<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>
<!-- A header: a block of introductory content that wraps a heading -->
<header>
<img src="logo.png" alt="Acme logo" />
<h1>Weekly Newsletter</h1>
<nav>
<a href="/archive">Archive</a>
<a href="/subscribe">Subscribe</a>
</nav>
</header>En résumé : placez un titre de section à l'intérieur d'un en-tête lorsque vous avez besoin d'un bloc introductif titré ; utilisez un titre seul quand vous voulez simplement étiqueter une section. Pour en savoir plus, consultez le chapitre sur la balise HTML <header>.