HTML premières étapes - leçon 1 - Balises h1-h6, p, strong

05/07/2025, by Ivan

Pour apprendre comment créer des documents HTML, consultez Premiers pas avec HTML.

Dans la leçon précédente, nous avons créé notre premier document HTML.

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>
    HTML mes premiers pas
  </body>
</html>

Dans cette leçon, nous allons remplir notre document avec du texte. Ajoutons la balise la plus courante en HTML, la balise . N'oubliez pas que les balises s'écrivent en latin, ce n'est pas la lettre "эр" russe. La balise est l'abréviation de "paragraph" (paragraphe) et signifie un paragraphe de texte.

Tout le texte en HTML doit être enveloppé dans une balise, alors dans notre document, mettons le texte dans une balise :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>
    <p>HTML mes premiers pas</p>
  </body>
</html>

Visuellement, notre document ne change pas, mais la structure HTML est maintenant plus correcte. Nous pouvons aussi ajouter plusieurs paragraphes de texte :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>
    <p>HTML mes premiers pas</p>
    <p>Chaque chasseur veut</p>
    <p>savoir où</p>
    <p>est le faisan</p>
  </body>
</html>

Comme vous le voyez, c'est assez simple. Les balises p sont au même niveau.

Ajoutons maintenant un titre à notre document. Pourquoi utiliser des titres en HTML ? D'abord pour structurer le texte, un texte structuré est plus facile et rapide à lire et à comprendre. Ensuite, les titres sont très importants pour le référencement du site dans les moteurs de recherche. Ne négligez donc pas les titres dans vos textes.

Pour les titres, nous utilisons les balises h1, h2, h3, h4, h5, h6. Le chiffre après le h (header - titre) indique l'importance du titre. Le h1 doit être unique sur la page et indique le sujet principal de la page HTML. Après h1, on peut utiliser h2, puis h3, ensuite h4, et ainsi de suite. En général, six niveaux de titres suffisent largement.

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>
    <h1>Mon premier document HTML</h1><br>
    <h2>Mes premiers pas</h2>
    <p>HTML mes premiers pas</p>
    <h3>Encore un pas</h3><br>
    <h2>Voici ce qu'on dit</h2>
    <p>Chaque chasseur veut</p>
    <p>savoir où</p>
    <p>est le faisan</p>
  </body>
</html>

Vous avez sans doute remarqué que la taille du texte des balises h dépend du chiffre après le h. Le navigateur montre ainsi que ce titre est plus important que le suivant.

Une autre particularité des balises h1-h6 est qu’elles s’affichent en gras. On peut aussi mettre du texte en gras avec la balise :

<html>
  <head>
    <title>Mon premier document HTML</title>
  </head>
  <body>
    <h1>Mon premier document HTML</h1>
    <h2>Mes premiers pas</h2>
    <p>HTML mes premiers pas</p>
    <h3>Encore un pas</h3>
    <h2>Voici ce qu'on dit</h2>
    <p>Chaque <strong>chasseur</strong> veut</p>
    <p>savoir où</p>
    <p>est le faisan</p>
  </body>
</html>

Notez que pour mettre du texte en gras, on utilise la balise strong. On ne doit pas utiliser les balises h1-h6 à l’intérieur d’une balise p ! Retenez cela, utiliser des balises h1-h6 à l’intérieur d’un p peut sérieusement nuire au référencement de votre site sur Google.

Rappelons la bonne pratique :

<p>Un texte très <strong>gras</strong></p>

Et ceci est très mauvais :

<p><h3>Ne faites pas</h3> ça !</p>

Je pense que vous pouvez maintenant ajouter autant de texte que vous voulez à votre page, le mettre en gras, et surtout le faire correctement.

Types de blocs supplémentaires (EBT) – Nouvelle expérience de Layout Builder❗

❗Types de paragraphes supplémentaires (EPT) – Nouvelle expérience Paragraphes

HTML premières étapes - leçon 1 - Balises h1-h6, p, strong