04

Votre première vraie balise : le titre <h1>

Dans le post précédent, vous avez compris ce qu’est une balise. Bravo ! Aujourd’hui, on en utilise une vraie, pour de bon. Celle qui transforme un simple mot en un titre, écrit en gros tout en haut d’une page.

Cette balise, c’est <h1>. Vous allez voir : elle est minuscule à écrire, et le résultat à l’écran est gigantesque.

Un titre, c’est ce qui dit au lecteur : « voilà de quoi je vous parle ». En haut d’un journal, d’un livre, d’un site : c’est toujours le titre qu’on lit en premier.

La balise <h1>, mot pour mot

Le « h » veut dire « titre » (en anglais, on dit « heading », mais ça, vous pouvez l’oublier). Le « 1 », lui, veut dire « le plus important ». C’est le titre principal de la page.

Souvenez-vous du post précédent : une balise vient par deux, et le texte se met au milieu. Pour un titre, ça donne ceci :

<h1> Bonjour </h1>

Trois petits éléments, c’est tout : une balise qui ouvre, votre mot, une balise qui ferme avec le « / ». Et le navigateur affiche votre mot en gros.

Une seule par page, c’est la règle

Il y a une chose importante à retenir : sur une page, il ne doit y avoir qu’un seul <h1>. Pas deux, pas trois. Un seul.

Pourquoi ? Parce que <h1>, c’est le titre principal, celui qui dit de quoi parle la page entière. Comme sur la porte d’entrée d’une maison : il y a un seul nom de famille, pas trois.

Avoir deux <h1> sur une page, c’est un peu comme avoir deux capitaines sur un bateau : il y en aura toujours un qui finit à l’eau.

Pour les autres titres (les titres de paragraphes, de chapitres, de sections), on utilisera plus tard d’autres balises : <h2>, <h3>, et ainsi de suite. Mais on n’en parlera que quand vous en aurez besoin. Pour l’instant, une seule chose compte : le <h1>.

Pourquoi le titre compte vraiment

Un bon <h1> n’aide pas que vos lecteurs. Il aide aussi Google et les autres moteurs de recherche à comprendre votre page : c’est la première chose qu’ils lisent. Plus votre titre est clair, plus votre page est trouvable.

Autrement dit : votre <h1>, c’est la pancarte devant votre site. Une belle pancarte attire l’œil, et tout le monde comprend tout de suite où il est.

Ce qu’il fallait retenir

Trois idées simples, et c’est tout pour aujourd’hui :

  • <h1>, c’est la balise du titre principal de la page ;
  • elle s’écrit comme toutes les balises : une qui ouvre, le texte au milieu, une qui ferme avec le « / » ;
  • une seule <h1> par page, jamais plus.

Dans le prochain post, on apprend à mettre plusieurs morceaux à la suite : un titre, puis un paragraphe, puis un autre paragraphe… En gros, vous allez vraiment commencer à construire une page. Mais ça, c’est pour la prochaine fois.

À très vite, et bravo pour votre premier vrai titre.

✏️ Exercice

Essayez par vous-même ! Cliquez sur les boutons en bas pour changer la balise. Regardez ce qui se passe dans la zone « Résultat » : le même mot, mais pas du tout le même résultat.

Résultat

Bonjour

Code HTML
<h1> Bonjour </h1>

Envie d’aller plus loin ? Ouvrez le vrai éditeur, avec les six tailles de titres déjà préparées pour vous :

— Me suivre —