Cours HTML / Titres et paragraphes : h1 à h6, p et br

Utilisez h1 à h6 pour les titres HTML et p pour les paragraphes. Les titres décrivent la hiérarchie d’une page, tandis que les paragraphes regroupent les phrases liées. Utilisez br uniquement lorsque vous avez besoin d’un saut de ligne dans le même paragraphe, et non pour commencer un nouveau paragraphe.

Utilisez h1–h6 pour montrer les niveaux de titres

HTML fournit six niveaux de titres. Une page utilise couramment h1 pour son titre principal, h2 pour les sections principales, et h3 pour les sujets à l'intérieur de ces sections. Le niveau d'un titre décrit où son contenu se situe dans le document; il ne s'agit pas d'un choix de taille de police. Comparez les régions de la page avec les titres dans Diviser une page avec des éléments sémantiques.

<h1>Guide d’accessibilité</h1>



<h2>Structure HTML</h2>

<p>Vue d’ensemble de la structure d’un document HTML.</p>



<h3>Niveaux de titres</h3>

<p>Comment organiser les titres.</p>



<h3>Paragraphes</h3>

<p>Comment séparer les paragraphes.</p>



<h2>Présentation CSS</h2>

<p>Comment le CSS modifie l’apparence des titres et des paragraphes.</p>

Les deux titres h3 ci-dessus sont des sujets à l'intérieur de la section h2 intitulée « Structure HTML ». Le prochain h2 commence une autre section principale. Lors de l'introduction d'une sous-section, évitez de sauter un niveau—par exemple, passer directement de h2 à h4.

Des titres clairs aident les lecteurs à parcourir la page et les utilisateurs de lecteurs d’écran à naviguer entre les sections. Le guide W3C WAI sur la structure des titres explique pourquoi les niveaux de titres doivent refléter l’organisation du contenu.

Si WordPress affiche déjà le titre de l'article comme h1 de la page, vous n'avez pas besoin d'un autre h1 pour le même titre dans le corps de l'article. Commencez plutôt ses sections principales avec h2.

Voir les titres et les paragraphes dans un navigateur

Enregistrez l'exemple complet suivant en tant que index.html et ouvrez-le dans un navigateur. Il présente les six niveaux de titres les uns à la suite des autres pour comparaison ; une vraie page n'a besoin que des niveaux requis par son contenu.

<!doctype html>

<html lang="fr">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Titres et paragraphes HTML</title>

  </head>

  <body>

    <h1>Titre 1</h1>

    <h2>Titre 2</h2>

    <h3>Titre 3</h3>

    <h4>Titre 4</h4>

    <h5>Titre 5</h5>

    <h6>Titre 6</h6>

    <p>Ceci est le premier paragraphe.</p>

    <p>Ceci est le deuxième paragraphe.</p>

  </body>

</html>

Les navigateurs donnent aux niveaux de titre des tailles et des espacements par défaut différents, mais l'apparence exacte dépend du navigateur et du CSS de la page. Si un titre doit paraître plus grand ou plus petit, modifiez son CSS plutôt que d'utiliser le mauvais niveau de titre.

Séparez les paragraphes avec p

L'élément p marque un paragraphe. Enveloppez des groupes distincts de phrases liées dans des éléments p séparés afin que leur relation reste claire.

<p>HTML crée la structure d’une page web.</p>

<p>Le CSS contrôle son apparence.</p>

Ce code crée deux paragraphes. Ajouter une ligne vide dans un éditeur de texte seul ne crée pas un nouveau paragraphe HTML. Un p peut contenir du texte ordinaire et du contenu en ligne tel que des liens, mais il ne doit pas contenir de titres, de listes ou de tableaux.

Pour ajouter de l'espace entre les paragraphes, utilisez une propriété CSS telle que margin plutôt que d'insérer des éléments vides p ou des éléments br répétés.

Utilisez br pour un saut de ligne dans un même paragraphe.

L'élément br commence une nouvelle ligne sans créer un nouveau paragraphe. Il est utile lorsque la position d'un saut de ligne est importante, comme dans une adresse ou un poème. Si le sujet change, commencez un autre p à la place.

Dans cet exemple, le deuxième p est un nouveau paragraphe. Le br modifie uniquement la ligne à l'intérieur de ce paragraphe.

<!doctype html>

<html lang="fr">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Paragraphes HTML et sauts de ligne</title>

  </head>

  <body>

    <p>Ceci est le premier paragraphe.</p>

    <p>Ceci est la première ligne du deuxième paragraphe.<br>Ceci est la deuxième ligne du deuxième paragraphe.</p>

  </body>

</html>

Conservez le niveau de titre sémantique dans le HTML et définissez sa taille visuelle en utilisant les polices, tailles et hauteurs de ligne en CSS.

Exercice : corriger une hiérarchie de titres

Lorsqu'une section majeure obtient sa première sous-section, ne passez pas de h2 à h4. Le problème dans ce fragment est sa hiérarchie, pas sa taille de police.

<!-- Un niveau de titre sauté -->
<h2>Informations de livraison</h2>
<h4>Zones de livraison</h4>

<!-- Une hiérarchie cohérente -->
<h2>Informations de livraison</h2>
<h3>Zones de livraison</h3>
<h3>Délais de livraison</h3>

Comparez les fragments séparément à l'intérieur d'un body d'un document ; ne gardez pas les deux comme contenu réel. Lisez seulement les titres et vérifiez si le sujet principal et ses sous-sujets restent clairs. Utilisez CSS pour ajuster leur apparence.

Vérifiez vos titres et paragraphes

• Choisissez h1–h6 selon la structure du contenu, pas selon la taille de police par défaut.
• Donnez à chaque titre un nom descriptif et évitez de sauter un niveau en passant à une sous-section.
• Utilisez un nouveau p pour un nouveau paragraphe ; utilisez br uniquement pour un retour à la ligne significatif dans un paragraphe.
• Contrôlez les tailles de police et les espacements avec le CSS, pas avec des éléments vides ou un niveau de titre différent.

Pour vérifier les balises mal imbriquées, soumettez votre HTML au service de validation du balisage du W3C. Testez l'ordre de lecture et l'utilisation du clavier avec la petite page dans Bases de l'accessibilité : titres, liens, images et clavier.