HTML Academy · Leçon

Titres h1-h6 et leur hiérarchie

Utilisez les niveaux de titre pour créer une structure de document pertinente.

Titres h1-h6 et leur hiérarchie est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Les six niveaux de titre

HTML fournit six éléments de titre, de <h1> à <h6> :

h1 — Titre principal de la page (le plus important)
h2 — Sections principales
h3 — Sous-sections
h4, h5, h6 — Sous-sections plus profondes (rarement nécessaires)

Leur taille diminue visuellement, mais la taille est contrôlée par CSS — pas par le chiffre.

Hiérarchie sémantique

Les titres créent un plan du document — une table des matières pour votre page :

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

La règle du h1

Bonne pratique pour <h1> :

Utilisez exactement un <h1> par page
Il doit correspondre à l’élément <title> ou s’en rapprocher fortement
Il présente le sujet principal de la page
Les moteurs de recherche lui accordent beaucoup de poids pour le référencement naturel

Ne sautez pas de niveaux

Les niveaux de titre doivent être utilisés dans l’ordre — ne passez pas de h2 à h4 :

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

Les titres pour la navigation

Les utilisateurs de lecteurs d’écran s’appuient sur les titres pour parcourir les pages longues :

Ils passent d’un titre à l’autre avec la touche H
Les lecteurs d’écran répertorient tous les titres comme une table des matières
Une hiérarchie correcte rend la page navigable sans avoir besoin de la voir

Mise en forme et sémantique

Ne choisissez pas un niveau de titre en fonction de sa taille visuelle — utilisez CSS pour cela :

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

Les titres dans les sections

Lorsque vous utilisez les éléments de sectionnement HTML5, la hiérarchie des titres recommence dans chaque section :

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

Conseils d’accessibilité pour les titres

Suivez ces règles concernant les titres pour garantir l’accessibilité :

Chaque page doit comporter au moins un titre
La zone de contenu principale doit commencer par un <h1>
N’utilisez pas les titres uniquement pour mettre du texte en gras ou l’agrandir
N’utilisez pas de texte en gras à la place des titres

Référencement naturel et titres

Les moteurs de recherche utilisent les titres pour comprendre le contenu d’une page :

<h1> a le plus grand poids pour le référencement naturel
Incluez naturellement les mots-clés ciblés dans les titres
Les titres structurent le contenu et améliorent les indicateurs de lisibilité
Les moteurs de recherche affichent les titres dans les résultats (extraits optimisés)

Styles par défaut du navigateur

Les navigateurs appliquent des styles par défaut aux titres :

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

Les titres dans la navigation

Les titres peuvent également être utilisés dans les repères de navigation :

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Vérification rapide

Combien d’éléments h1 une page bien structurée devrait-elle généralement comporter ?

Récapitulatif : les titres

Les principes essentiels de la hiérarchie des titres :

Six niveaux : de h1 à h6
Un seul h1 par page — le titre principal
Utilisez les niveaux dans l’ordre — ne sautez jamais de niveau
Les titres créent un plan du document accessible
Utilisez CSS pour la taille visuelle, pas les numéros des titres

Questions Fréquemment Posées

La leçon « Titres h1-h6 et leur hiérarchie » est-elle gratuite ?

Oui — le texte complet de « Titres h1-h6 et leur hiérarchie » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Titres h1-h6 et leur hiérarchie » ?

Utilisez les niveaux de titre pour créer une structure de document pertinente. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Titres h1-h6 et leur hiérarchie » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à HTML Academy