C'est quoi une balise HTML, et comment ça marche ?

Dans le post précédent, vous avez écrit votre premier mot dans l’éditeur. Bravo ! Aujourd’hui, on apprend à parler au navigateur.

Le mot « balise » fait un peu peur. Pas de panique : à la fin de cet article, vous aurez tout compris. C’est promis, et c’est plus simple que ça en a l’air.

← →

Une balise, c’est une étiquette

Imaginez des boîtes de rangement à la maison. Sur l’une, vous écrivez « chaussettes ». Sur une autre, « jouets ». L’étiquette dit ce qu’il y a dans la boîte.

Une page web, c’est pareil. Le navigateur ne devine rien tout seul. Si vous tapez juste un mot, il ne sait pas si c’est un titre, une phrase, ou autre chose. Il faut le lui dire. Et pour le lui dire, on met une étiquette autour du mot. Cette étiquette, c’est une balise.

On ouvre la boîte, on la referme

Une balise vient presque toujours par deux. Une pour ouvrir, une pour fermer. C’est exactement comme une boîte : on l’ouvre, on met quelque chose dedans, on la referme.

Le texte que vous voulez afficher se place au milieu, entre les deux balises :

Regardez bien. À gauche, la balise qui ouvre. Au milieu, votre texte. À droite, la même balise, mais avec un petit trait en plus : le « / ». Ce petit trait veut simplement dire « on referme ».

Comment c’est écrit

Une balise, c’est un mot entouré de deux petites flèches : « < » et « > ». (Leur vrai nom, c’est « chevrons », mais ça, vous pouvez l’oublier tout de suite.)

Le mot à l’intérieur dit de quoi il s’agit. Par exemple, la lettre « p » veut dire « paragraphe » : c’est-à-dire un morceau de texte, une phrase.

• <p>  : la balise qui ouvre le paragraphe ;
• </p>  : la même, avec le « / », qui le referme.

Pourquoi c’est une bonne nouvelle

Vous pourriez croire qu’il faut connaître des centaines de balises. C’est faux. Avec une petite poignée de balises, on construit déjà de vraies pages.

Une balise pour les titres, une pour les paragraphes, une pour les images, une pour les liens… Ce n’est pas une langue immense à apprendre par cœur. C’est un petit jeu de quelques étiquettes, et vous venez d’en poser la première.

Ce qu’il fallait retenir

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

• une balise, c’est une étiquette posée sur un morceau de texte ;
• elle vient par deux : une qui ouvre, une qui ferme avec le « / » ;
• le texte se place entre les deux.

Dans le prochain post, on s’amuse avec une balise très utile : celle qui transforme un simple mot en un vrai titre, écrit en gros en haut de la page. Mais ça, c’est pour la prochaine fois.

À très vite, et bravo pour votre première balise.

✏️ Exercice