Quand vous lisez un article sur votre iPhone, vous voyez un grand titre, puis des paragraphes, parfois une photo et des liens en couleur. Votre téléphone a compris tout seul que telle phrase était un titre et telle autre un simple paragraphe. Il l’a compris grâce au HTML.
À quoi sert le HTML ?
HTML sont les initiales de trois mots anglais qui veulent dire « langage de balisage hypertexte » : en clair, un langage d’étiquettes pour des pages reliées entre elles par des liens. C’est la toute première couche d’un site, celle sans laquelle il n’y a rien à voir.
Le HTML s’occupe de deux choses :
- le contenu : les mots, les liens, l’emplacement des images ;
- la structure : ce qui est un titre, un sous-titre, une liste, un bouton, un menu.
Il ne s’occupe pas de l’apparence. Les couleurs, les polices et la mise en page sont le travail du CSS. Ce qui bouge ou réagit quand vous touchez l’écran, c’est le JavaScript. Le HTML, lui, pose le squelette.
Comment ça marche concrètement : les balises
Pour dire « ceci est un titre », le HTML entoure le texte de deux étiquettes, qu’on appelle des balises. Une balise s’écrit entre deux chevrons, ces petits signes en forme de pointe. Il y a une balise qui ouvre et une balise qui ferme, avec une barre oblique.
Par exemple, pour un grand titre, on écrit <h1> avant le texte et </h1> après. Pour un paragraphe, <p> et </p>. Pour un lien, <a>, qui contient aussi l’adresse de la page où mène le lien.
Voici quelques balises qu’on croise tout le temps :
<h1>,<h2>,<h3>: les titres, du plus important au moins important ;<p>: un paragraphe ;<a>: un lien vers une autre page ;<img>: l’emplacement d’une image ;<ul>et<li>: une liste à puces et chacun de ses éléments.
Le navigateur lit ces balises de haut en bas et affiche le contenu en conséquence. Les balises elles-mêmes restent invisibles pour le visiteur.
Le HTML et les autres morceaux du site
Le HTML vit dans les fichiers du site, à côté du CSS, du JavaScript et des images. Il en est le chef d’orchestre : c’est lui qui dit « utilise cette feuille de style », « charge ce petit programme », « affiche cette photo ici ».
Quand vous tapez une adresse, c’est le serveur web qui envoie ce HTML à votre navigateur. Parfois, le fichier existe déjà tel quel sur le serveur. Parfois, il est fabriqué à la demande par le code PHP, qui va chercher des informations dans la base de données puis écrit un HTML tout neuf. Dans les deux cas, ce que reçoit votre téléphone, c’est du HTML.
Un exemple réel
Sur un ordinateur, dans Chrome, faites un clic droit sur une page et choisissez « Afficher le code source de la page ». Une fenêtre s’ouvre, pleine de texte et de chevrons. C’est le HTML de la page, exactement tel que le serveur l’a envoyé. Vous y retrouverez les phrases que vous lisiez, entourées de leurs balises. Pas d’inquiétude : regarder ne casse rien.
Le HTML compte aussi pour Google. Le moteur de recherche lit les balises pour comprendre de quoi parle la page : le grand titre, les sous-titres, le texte des liens. Un HTML bien rangé aide votre site à être trouvé.
Les mots qu’on vous dira
- HTML5 : la version actuelle du HTML. Aujourd’hui, quand on dit HTML, on parle de celle-là.
- Code source : le texte brut de la page, avec toutes ses balises.
- Attribut : une précision ajoutée dans une balise, comme l’adresse d’un lien ou la description d’une image.
- Balise fermante : celle qui commence par une barre oblique, comme
</p>. Si on l’oublie, la suite de la page peut s’afficher de travers.
Ce que vous avez à retenir
Vous n’avez pas besoin d’apprendre les balises par cœur. Il suffit de savoir que le texte de votre site se trouve dans du HTML, et que chaque morceau porte une étiquette. Si vous voulez changer une phrase, un titre ou un lien, c’est dans le HTML que ça se passe.
Et si vous préférez ne pas y toucher du tout, un assistant IA installé sur votre serveur peut le faire pour vous : vous lui écrivez « remplacez le titre de l’accueil par Boulangerie Martin », il trouve la bonne balise et change le texte.