Docs HTML exécutables : Titres h1 à h6

Q: Combien y a-t-il de balises de titre en HTML ?

Six : , , , , et . est le plus important (le titre de la page) et le moins important. Il n'existe pas de ; une telle balise est traitée comme un élément inline inconnu.

Q: Peut-on avoir plusieurs h1 sur une page ?

HTML l'autorise, mais un seul qui nomme la page est la structure la plus claire pour les utilisateurs de lecteurs d'écran et les moteurs de recherche. Utilisez pour les sections principales en dessous.

Q: Comment changer la taille d'un titre ?

Définissez font-size en CSS, par exemple h2 { font-size: 20px; } ou une classe sur un titre. Ne choisissez jamais un niveau de titre pour sa taille par défaut.

Titres HTML : h1 à h6, tailles, ordre et mise en forme

HTML a six niveaux de titres, de <h1> à <h6>, qui donnent son plan à une page. Découvrez les tailles par défaut, l'ordre des titres, le nombre de h1 à utiliser, comment changer leur taille en CSS et comment les lecteurs d'écran s'en servent.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Les six balises de titre HTML

HTML a six niveaux de titres, de <h1> à <h6>. <h1> est le niveau le plus haut (le titre de la page) et <h6> le plus bas. Les navigateurs affichent chaque niveau plus petit que le précédent, tous en gras, chacun sur sa propre ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</title>
</head>
<body>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <p>A paragraph, for comparison.</p>
</body>
</html>

Balise	Taille par défaut	Avec un texte de 16px
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5> et <h6> sont plus petits que le texte normal par défaut, ce qui surprend. La taille n'est qu'une valeur par défaut, et les sections suivantes montrent pourquoi il ne faut jamais choisir le niveau d'après la taille.

Les titres forment le plan de la page

Les titres ne sont pas de la décoration. Ensemble, ils forment le plan de la page, comme la table des matières d'un livre. Les utilisateurs de lecteurs d'écran sautent de titre en titre pour trouver ce qu'ils cherchent, et les moteurs de recherche les lisent pour comprendre les sujets de la page.

La règle est simple : un <h1> pour le titre de la page, un <h2> pour chaque section principale, un <h3> pour les sous-sections d'un <h2>, et ainsi de suite, sans sauter de niveau. Cet exemple construit une table des matières à partir des titres, de la même façon que les outils d'assistance les voient :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

Changez le deuxième <h3> en <h5> et le plan montre un trou : un lecteur qui navigue par les titres se demanderait où est passé h4.

Changer la taille d'un titre

Choisissez le niveau selon la position dans le plan, puis réglez l'apparence en CSS. Le titre d'une barre latérale peut devoir être un <h2> tout en paraissant petit ; le titre d'une bannière d'accueil peut être un <h1> très grand :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

L'inverse vaut aussi : n'utilisez pas une balise de titre juste pour rendre un texte grand ou gras. Pour des mots en gras dans une phrase, utilisez <strong>, et pour un grand texte qui n'est pas un titre, un <p> avec une classe. Voir le gras pour les balises de texte.

Sous-titres et accroches

Un sous-titre placé juste sous un titre n'est généralement pas un titre lui-même : il ne commence pas de nouvelle section. Utilisez un paragraphe, et regroupez les deux avec <hgroup> si vous voulez :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

Le plan reste propre (un h1, puis des sections h2), et l'accroche reste visuellement collée au titre.

Faire un lien vers un titre

Donnez un id à un titre et tout lien avec #id dans son href y mène directement. C'est ainsi que fonctionnent les tables des matières et les boutons « copier le lien de la section » :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

Erreurs fréquentes

Choisir le niveau pour sa taille. Choisissez selon la position dans le plan, puis stylisez en CSS.
Sauter des niveaux. Passer directement de <h2> à <h4> casse la navigation des utilisateurs de lecteurs d'écran.
Des titres pour mettre en valeur. Une ligne en gras dans un paragraphe est un <strong>, pas un <h4>.
Pas de <h1>, ou un logo comme seul <h1>. Le <h1> doit nommer le contenu de la page, comme le titre de l'article ou du produit.
Des titres vides. Un titre qui ne contient qu'une icône ou rien du tout est annoncé comme vide. Mettez-y du vrai texte.

Questions fréquentes

Combien y a-t-il de balises de titre en HTML ?

Six : <h1>, <h2>, <h3>, <h4>, <h5> et <h6>. <h1> est le plus important (le titre de la page) et <h6> le moins important. Il n'existe pas de <h7> ; une telle balise est traitée comme un élément inline inconnu.

Quelles sont les tailles par défaut des titres HTML ?

Avec un texte par défaut de 16px, les navigateurs affichent h1 à 32px (2em), h2 à 24px (1.5em), h3 à 18.72px (1.17em), h4 à 16px (1em), h5 à 13.28px (0.83em) et h6 à 10.72px (0.67em), tous en gras.

Peut-on avoir plusieurs h1 sur une page ?

HTML l'autorise, mais un seul <h1> qui nomme la page est la structure la plus claire pour les utilisateurs de lecteurs d'écran et les moteurs de recherche. Utilisez <h2> pour les sections principales en dessous.

Peut-on sauter des niveaux de titre, par exemple de h2 à h4 ?

Évitez-le. Les utilisateurs de lecteurs d'écran naviguent par niveau de titre, et un saut de h2 à h4 laisse penser qu'une section manque. Choisissez le niveau selon la position dans le plan et changez la taille en CSS.

Comment changer la taille d'un titre ?

Définissez font-size en CSS, par exemple h2 { font-size: 20px; } ou une classe sur un titre. Ne choisissez jamais un niveau de titre pour sa taille par défaut.

Concepts liés