Créer des titres et paragraphes en HTML

Après avoir créé votre première page HTML, il est temps de structurer votre contenu avec des titres et des paragraphes. Une bonne structure rend votre contenu plus lisible, améliore le référencement (SEO) et garantit une meilleure accessibilité.

Dans cet article, nous allons apprendre à utiliser les balises de titres <h1> à <h6> et les paragraphes <p> pour organiser efficacement votre contenu.

L’importance des titres en HTML#

Les titres ne servent pas seulement à l’esthétique. Ils jouent plusieurs rôles cruciaux :

Structure sémantique#

Les titres créent une hiérarchie claire de votre contenu, permettant aux utilisateurs et aux moteurs de recherche de comprendre rapidement l’organisation de votre page.

Accessibilité#

Les lecteurs d’écran et autres technologies d’assistance utilisent les titres pour naviguer rapidement dans le contenu, offrant une meilleure expérience aux utilisateurs malvoyants.

Référencement (SEO)#

Les moteurs de recherche analysent la structure des titres pour comprendre les sujets principaux de votre page et déterminer sa pertinence pour les requêtes de recherche.

Les titres permettent de générer automatiquement des sommaires et des tables des matières, facilitant la navigation dans les longs documents.

Les niveaux de titres HTML#

HTML propose six niveaux de titres, de <h1> (le plus important) à <h6> (le moins important) :

<h1>Titre principal - Le plus important</h1>
<h2>Sous-titre de niveau 2</h2>
<h3>Sous-titre de niveau 3</h3>
<h4>Sous-titre de niveau 4</h4>
<h5>Sous-titre de niveau 5</h5>
<h6>Sous-titre de niveau 6 - Le moins important</h6>

Règles d’utilisation des titres#

Un seul <h1> par page : C’est le titre principal de votre page
Hiérarchie logique : Ne sautez pas de niveaux (n’utilisez pas <h3> après <h1> sans <h2>)
Structure cohérente : Organisez votre contenu comme un plan avec des sections et sous-sections

Les paragraphes en HTML#

Les paragraphes sont créés avec la balise <p>. Ils représentent des blocs de texte distincts :

<p>
  Ceci est un paragraphe. Il contient du texte qui forme une idée cohérente.
</p>
<p>
  Ceci est un autre paragraphe. Chaque paragraphe est automatiquement séparé par
  un espacement vertical.
</p>

Bonnes pratiques pour les paragraphes#

Un paragraphe = une idée : Chaque paragraphe devrait développer une seule idée principale
Longueur raisonnable : Évitez les paragraphes trop longs qui sont difficiles à lire
Texte significatif : Le contenu doit être pertinent et utile pour vos lecteurs

Exemple pratique complet#

Voici un exemple complet qui combine titres et paragraphes pour créer une page bien structurée :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mon article structuré</title>
  </head>
  <body>
    <h1>Apprendre le HTML</h1>

    <p>
      HTML est un langage fascinant qui permet de créer des pages web. Dans cet
      article, nous allons explorer les bases de la structuration du contenu.
    </p>

    <h2>Les titres hiérarchiques</h2>

    <p>
      Les titres sont essentiels pour organiser votre contenu. Ils créent une
      structure logique que les utilisateurs et les moteurs de recherche peuvent
      facilement comprendre.
    </p>

    <h3>Le titre principal</h3>

    <p>
      La balise h1 doit être utilisée une seule fois par page pour définir le
      sujet principal de votre contenu.
    </p>

    <h3>Les sous-titres</h3>

    <p>
      Les balises h2, h3, h4, h5 et h6 permettent de créer des sous-sections
      organisées de manière logique.
    </p>

    <h2>Les paragraphes</h2>

    <p>
      Chaque paragraphe devrait développer une idée spécifique. Évitez les
      paragraphes trop longs qui peuvent décourager la lecture.
    </p>

    <p>
      Une bonne pratique est de limiter chaque paragraphe à 3-4 phrases maximum
      pour maintenir l'attention du lecteur.
    </p>
  </body>
</html>

Erreurs courantes à éviter#

❌ Mauvais exemples#

<!-- Plusieurs h1 sur la même page -->
<h1>Titre principal</h1>
<h1>Autre titre principal</h1>

<!-- Saut de niveau de titre -->
<h1>Titre principal</h1>
<h3>Sous-titre (manque h2)</h3>

<!-- Titres utilisés pour le style uniquement -->
<h4>Ceci est juste du texte normal</h4>

✅ Bonnes pratiques#

<!-- Un seul h1 par page -->
<h1>Titre principal unique</h1>

<!-- Hiérarchie respectée -->
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

<!-- Titres sémantiquement corrects -->
<h2>Section importante</h2>
<p>Texte explicatif de cette section.</p>

Prochaines étapes#

Maintenant que vous maîtrisez les titres et paragraphes, vous pouvez explorer :

Les listes : <ul>, <ol>, <li> pour organiser des informations
Les liens : <a> pour créer des liens hypertextes
Les images : <img> pour ajouter du contenu visuel
Les mises en forme : <strong>, <em>, <br> pour enrichir votre texte

Vous savez maintenant structurer correctement votre contenu HTML avec des titres hiérarchiques et des paragraphes bien organisés !