Balises HTML <h1>-<h6>
Les balises <h1> à <h6> définissent les titres HTML. <h1> est le titre le plus important, <h6> le moins important. Exemples inclus !
Les éléments <h1> à <h6> permettent de définir six niveaux de titres HTML, <h1> étant le niveau le plus élevé (ou le plus important) et <h6> le moins important.
Chaque page web ne doit comporter qu'un seul titre <h1>. Les moteurs de recherche l'utilisent pour indexer la structure et le contenu des documents web ; veillez donc à y inclure des mots-clés.
Les agents utilisateurs peuvent se servir des informations contenues dans les titres pour générer automatiquement une table des matières du document.
Pour redimensionner du texte, il est préférable de ne pas utiliser les balises de titre. Utilisez plutôt la propriété CSS font-size. Il est recommandé de ne pas sauter de niveaux de titre (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) et de n'utiliser <h1> qu'une seule fois par page.
Les balises de titre ont également une valeur SEO. Un moteur de recherche cherche à déterminer deux choses à propos de votre page : son sujet et sa qualité. L'un des principaux éléments qu'il examine pour déterminer le contenu d'une page est le texte contenu dans les balises de titre.
Lorsqu'une page comporte un seul contenu principal, son titre doit figurer dans une balise <h1>, les grandes sections dans des balises <h2>, et ainsi de suite. De cette façon, vous pouvez mieux organiser votre contenu. N'oubliez pas que les lecteurs ne lisent pas chaque mot du contenu.
Il existe deux types de pages avec contenu : les pages à contenu unique et les pages d'index. Sur les pages à contenu unique, le titre de ce contenu doit être placé dans un <h1> près du haut de <body>. Sur une page d'index, le titre du site ou le nom de l'index est généralement placé dans un <h1>. Les titres de toutes les parties listées individuellement doivent ensuite utiliser des balises <h2>.
Les balises <h1> à <h6> étant des éléments de niveau bloc, elles commencent toujours sur une nouvelle ligne et occupent toute la largeur disponible.
Par défaut, les navigateurs affichent les balises <h1>-<h6> avec le CSS suivant, où la font-size diminue à chaque niveau tandis que le font-weight reste en gras :
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Syntaxe
Les balises <h1>-<h6> vont par paires, la balise de fermeture est donc obligatoire.
Exemple des balises HTML <h1>-<h6> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>Les éléments <h1>-<h6> ne doivent pas être utilisés pour baliser des sous-titres, des légendes, des titres alternatifs ou des accrocheurs, sauf s'ils sont destinés à servir de titre pour une nouvelle section ou sous-section.
L'attribut align n'étant pas pris en charge en HTML5, utilisez à la place la propriété CSS text-align.
Construire un plan de document
Les titres ne concernent pas la taille — ils concernent la structure. Considérez les <h1>-<h6> comme la table des matières de votre page. Le <h1> nomme l'ensemble de la page, chaque <h2> ouvre une section principale, et <h3> (et les niveaux inférieurs) emboîtent des sous-sections à l'intérieur, comme 1 → 1.1 → 1.1.1 dans un plan imprimé.
Dans l'exemple ci-dessous, un article possède un titre <h1>, deux sections <h2> et une sous-section <h3> imbriquée dans l'une d'elles. En lisant uniquement les titres, vous comprenez déjà ce que couvre la page :
<!DOCTYPE html>
<html>
<head>
<title>Growing Tomatoes at Home</title>
</head>
<body>
<article>
<h1>Growing Tomatoes at Home</h1>
<p>A beginner's guide to a healthy tomato harvest.</p>
<h2>Choosing a Variety</h2>
<p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>
<h2>Planting and Care</h2>
<p>Tomatoes need full sun and consistent watering.</p>
<h3>Watering Schedule</h3>
<p>Water deeply two to three times a week, more often in heat.</p>
<h3>Common Pests</h3>
<p>Watch for aphids and hornworms on the underside of leaves.</p>
</article>
</body>
</html>Les titres <h3> appartiennent à la section <h2> « Planting and Care » car ils apparaissent après elle et en décrivent des parties. Remarquez que l'exemple ne passe jamais directement de <h1> à <h3> — chaque niveau suit celui qui le précède.
Mettre en forme les titres avec CSS
Pour modifier l'apparence d'un titre — sa couleur, sa taille, son alignement ou ses espacements — utilisez CSS, pas un niveau de titre différent. Choisissez la balise de titre selon sa place dans le plan, puis stylisez-la librement :
<!DOCTYPE html>
<html>
<head>
<title>Styled headings</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
h2 {
color: #22c599;
font-size: 22px;
}
h3 {
color: #bc22c5;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Growing Tomatoes at Home</h1>
<h2>Choosing a Variety</h2>
<h3>Watering Schedule</h3>
</body>
</html>Accessibilité et ordre des titres
Les utilisateurs de lecteurs d'écran lisent rarement une page de haut en bas. Ils affichent plutôt une liste de titres et naviguent entre eux, comme un lecteur voyant parcourt les titres en gras. Cela ne fonctionne que si vos titres forment un plan correct, sans lacunes.
Deux règles rendent les titres accessibles :
- Ne sautez pas de niveaux. Passez de
<h1>→<h2>→<h3>, et non de<h1>→<h3>. Un niveau manquant amène les technologies d'assistance à signaler une section sans parent. - Ne choisissez pas un titre selon sa taille visuelle. Si vous voulez un petit titre de section, utilisez le niveau correct (par exemple
<h3>) et réduisez-le avec CSS font-size. N'utilisez jamais<h4>simplement parce qu'il s'affiche plus petit.
Les deux extraits ci-dessous balisent le même contenu. Le premier rompt le plan ; le second le conserve intact :
<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>
<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>N'utilisez qu'un seul <h1> par page. Le <h1> répond à la question « de quoi parle cette page ? » — en avoir plusieurs brouille cette réponse aussi bien pour les moteurs de recherche que pour les lecteurs d'écran. (Vous trouverez peut-être d'anciens conseils autorisant un <h1> par <article> ou <section> ; ils reposaient sur un algorithme de plan de document qu'aucun navigateur n'a jamais implémenté, aussi restez sur un seul <h1> par page.) Le titre de la page affiché dans l'onglet du navigateur est défini séparément avec la balise <title> à l'intérieur du <head>.
Pour une vue d'ensemble du fonctionnement des six niveaux ensemble, consultez le chapitre Titres HTML.
Attributs
Les balises <h1> à <h6> ne possèdent pas d'attributs spécifiques à ces éléments. Deux attributs de l'ensemble global sont particulièrement courants sur les titres :
| Attribut | Valeur | Description |
|---|---|---|
| id | texte | Donne au titre un identifiant unique afin qu'il puisse être ciblé par un lien d'ancrage (#section-name) ou par CSS et JavaScript. |
| align | left, right, center, justify | Définit l'alignement horizontal du titre. Déprécié — non pris en charge en HTML5 ; utilisez à la place la propriété CSS text-align. |
Une utilisation courante de id est de permettre aux lecteurs d'accéder directement à une section :
<h2 id="planting">Planting and Care</h2>
<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>Les balises <h1> à <h6> prennent également en charge les attributs globaux et les attributs d'événements.