Le HTML : la langue secrète des pages web
Chaque fois que tu ouvres une page sur Internet, quelqu'un l'a écrite. Pas dessinée, pas photographiée : écrite, comme on écrit une lettre, mais dans un langage particulier que ton navigateur sait lire. Ce langage s'appelle le HTML, et la nouvelle surprenante, c'est que tu peux apprendre à l'écrire toi-même. Ce cours te conduit pas à pas : tu vas d'abord comprendre la logique, puis tu écriras tes premières lignes.
📄 Qu'est-ce que le HTML ?
Voici une idée à laquelle on ne pense jamais : une page web n'est pas une image. Quand tu regardes un site, tu as l'impression de voir une feuille déjà toute prête, avec ses titres et ses photos bien placés. En réalité, ton ordinateur reçoit du texte accompagné d'instructions, et c'est lui qui assemble tout cela sous tes yeux, en une fraction de seconde.
Ce texte et ces instructions sont écrits en HTML. Le mot est une abréviation de l'anglais HyperText Markup Language, que l'on peut traduire par « langage de balisage hypertexte ». Examinons chacun de ses trois morceaux, car tous ont un sens précis. HyperText désigne un texte qui contient des liens permettant de sauter d'une page à une autre. Markup, le « balisage », signifie que nous ajoutons autour du texte des marques qui indiquent son rôle : ceci est un titre, ceci est un paragraphe. Enfin, Language rappelle qu'il s'agit bien d'une langue, avec ses règles et sa grammaire.
Le HTML est le langage qui donne sa structure à une page web. Il indique au navigateur ce qui est un titre, un paragraphe, une liste ou un lien. Il ne s'occupe pas des couleurs ni de la décoration : il organise le contenu, comme le squelette organise le corps.
Il faut bien distinguer deux choses qu'on confond souvent. Le HTML s'occupe de la structure (quel est le rôle de chaque morceau de texte). La décoration, c'est-à-dire les couleurs, les polices et la mise en page, relève d'un autre langage, le CSS, que tu découvriras plus tard. Dans ce cours, nous restons entièrement sur le HTML pur.
En mars 1989, un informaticien britannique nommé Tim Berners-Lee travaillait au CERN, le grand laboratoire de physique situé près de Genève. Il proposa à sa direction un système pour relier entre eux les documents des chercheurs. Le premier site web fut mis en ligne en 1991. Puis, en 1993, le CERN prit une décision rare : il offrit cette technologie au monde entier, gratuitement et sans condition. C'est précisément pour cela que n'importe qui, aujourd'hui, peut créer une page web sans payer ni demander la permission à personne.
Le « Web » et « Internet » ne sont pas la même chose, même si on les confond tout le temps. Internet est le réseau physique, l'ensemble des câbles et des machines reliés à travers la planète. Le Web, lui, est seulement l'une des choses qui circulent sur ce réseau : l'ensemble des pages reliées par des liens. Le HTML est la langue de ce Web.
Tu peux vérifier toi-même que les pages sont faites de texte. Sur n'importe quel site, dans la plupart des navigateurs sur ordinateur, un clic droit suivi de « Afficher le code source de la page » fait apparaître le HTML qui se cache derrière. Tu verras défiler des dizaines de lignes : c'est la recette complète de la page que tu regardais.
Pour bien garder en tête ce que le HTML prend en charge, et ce qui ne le concerne pas, voici un petit tableau de repère :
| Le HTML s'occupe de… | … mais pas de |
|---|---|
| Indiquer qu'un texte est un titre | Choisir sa couleur ou sa police |
| Indiquer qu'un texte est un paragraphe | Régler ses marges et son espacement |
| Placer un lien ou une image | Décorer le fond de la page |
La colonne de droite relève du CSS, le langage de décoration que tu découvriras plus tard.
- Une page web est faite de texte et d'instructions, pas d'une image figée.
- Le HTML donne la structure ; il ne s'occupe pas de la décoration.
- Il a été inventé par Tim Berners-Lee au CERN, puis offert au monde en 1993.
🏷️ La logique des balises
Nous arrivons au cœur du HTML. Si tu comprends bien ce chapitre, tout le reste deviendra limpide. La grande idée tient en un mot : la balise. Une balise est une marque, écrite entre deux chevrons, qui annonce le rôle d'un morceau de texte.
La plupart des balises fonctionnent par paire : une balise d'ouverture, puis le contenu, puis une balise de fermeture identique mais précédée d'une barre oblique. Par exemple, pour écrire un paragraphe, on encadre le texte entre <p> et </p> (la lettre p vient de l'anglais paragraph).
Une balise est une étiquette placée entre chevrons (< et >) qui indique le rôle d'un contenu. La balise d'ouverture s'écrit <nom>, la balise de fermeture </nom>. L'ensemble formé par la balise d'ouverture, le contenu et la balise de fermeture s'appelle un élément.
Deuxième principe, tout aussi important : les éléments peuvent s'emboîter les uns dans les autres, exactement comme des poupées russes. Un élément placé à l'intérieur d'un autre doit être refermé avant celui qui l'entoure. L'ordre compte : nous refermons toujours en commençant par le dernier élément ouvert.
Imaginons un paragraphe contenant un mot important. La balise <strong> sert à signaler qu'un texte a de l'importance. Observe comment elle s'ouvre et se referme à l'intérieur du paragraphe, sans jamais en déborder :
Ici, le <strong> a été ouvert après le <p> ; il est donc refermé avant lui. C'est la règle : le dernier élément ouvert est le premier refermé, comme une poupée russe que l'on referme de l'intérieur vers l'extérieur.
Voyons maintenant ce qu'il ne faut pas faire. « Croiser » les balises, c'est refermer le paragraphe alors que le <strong> est encore ouvert :
Les deux éléments se chevauchent au lieu de s'emboîter : le <p> se referme à l'intérieur du <strong>, et le <strong> se referme à l'extérieur du <p>. Le navigateur ne sait plus dire lequel contient l'autre. Il finira par afficher quelque chose, mais sans garantie que ce soit ce que tu voulais : mieux vaut donc toujours emboîter proprement.
Troisième principe : certaines balises portent des attributs. Un attribut est une précision ajoutée à l'intérieur de la balise d'ouverture, sous la forme nom="valeur". Il sert à donner une information supplémentaire dont le navigateur a besoin. Tu en rencontreras dans le chapitre suivant, par exemple l'adresse vers laquelle pointe un lien.
Le mot « balisage » (en anglais markup) ne vient pas du tout de l'informatique. Bien avant les ordinateurs, lorsqu'un auteur remettait son manuscrit à un imprimeur, des correcteurs annotaient les pages à la main avec des symboles convenus : ce passage en gros caractères, celui-ci en retrait, ce mot à mettre en valeur. On appelait ce travail « marquer » le texte. Quand le HTML est né, ses créateurs ont repris exactement cette idée : entourer le texte de marques pour indiquer son rôle.
Quelques rares balises n'ont rien à entourer et fonctionnent donc toutes seules, sans fermeture. C'est le cas de l'image, <img>, ou du saut de ligne, <br>. On les appelle des balises « auto-fermantes » ou « vides ». Elles sont l'exception : la grande majorité des balises vont par deux.
Voici, pour résumer, comment se répartissent les deux familles de balises :
| Famille | Comment elle s'écrit | Exemples |
|---|---|---|
| Balises par paire | Ouverture, contenu, fermeture | <p>…</p> ; <strong>…</strong> |
| Balises auto-fermantes | Une seule balise, sans contenu à entourer | <img> ; <br> |
- Une balise s'écrit entre chevrons et annonce le rôle d'un contenu.
- La plupart vont par paire :
<p>ouvre,</p>ferme. - Les éléments s'emboîtent : on referme le dernier ouvert en premier.
- Certaines balises portent des attributs de la forme
nom="valeur".
🦴 Le squelette d'une page
Toute page web, de la plus simple à la plus compliquée, repose sur le même squelette. Tu vas le reconnaître partout une fois que tu l'auras appris. Le voici en entier, puis nous l'examinerons ligne par ligne :
La toute première ligne, <!DOCTYPE html>, prévient le navigateur : « ce qui suit est une page HTML moderne ». Ce n'est pas vraiment une balise, mais une déclaration. Vient ensuite <html>, qui enveloppe absolument tout le reste, et qui se referme tout en bas avec </html>. Son attribut lang="fr" annonce que la page est écrite en français.
À l'intérieur, la page se divise en deux grandes parties. La première, <head> (la « tête »), contient des informations qui ne s'affichent pas dans la page elle-même mais dont le navigateur a besoin. On y trouve <meta charset="UTF-8">, qui indique comment lire les caractères accentués comme é, à ou ç, et <title>, qui donne le titre affiché dans l'onglet du navigateur. La seconde partie, <body> (le « corps »), contient tout ce que le visiteur voit réellement : les titres, les paragraphes, les images.
Le <head> contient les informations sur la page (titre de l'onglet, jeu de caractères) ; rien de ce qu'il contient n'apparaît dans la fenêtre. Le <body> contient le contenu visible de la page. Tout texte que tu veux montrer au visiteur se place dans le <body>.
Voici une page minuscule et son rendu côte à côte. À gauche, ce que nous écrivons ; à droite, ce que le navigateur affiche. Remarque que le contenu du <title> apparaît dans l'onglet, tandis que le contenu du <body> apparaît dans la fenêtre.
<head> <title>Mon site</title> </head> <body> <p>Bienvenue !</p> </body>
Bienvenue !
Pendant les premières années du Web, il n'existait aucune école pour apprendre le HTML. Comment les gens ont-ils appris, alors ? Tout simplement en regardant le code des autres. Lorsqu'une page leur plaisait, ils affichaient son code source, l'observaient, puis le recopiaient en l'adaptant. Cette habitude du « clic droit, afficher le code source » a formé une génération entière de créateurs de sites, par simple curiosité et imitation.
L'indentation, c'est-à-dire le décalage des lignes vers la droite que tu observes dans le squelette, n'est pas obligatoire : le navigateur s'en moque complètement. Elle existe uniquement pour les humains. En décalant les éléments emboîtés, on voit d'un coup d'œil ce qui est contenu dans quoi. Tous les programmeurs soignent cette présentation, car un code bien rangé est un code que l'on relit sans peine.
<!DOCTYPE html>annonce une page HTML moderne.<html>enveloppe toute la page.- Le
<head>contient les informations invisibles (titre de l'onglet, jeu de caractères). - Le
<body>contient tout ce que le visiteur voit.
✍️ Donner vie au contenu
Tu sais maintenant construire le squelette d'une page. Il est temps de le remplir. Voici les balises les plus utiles, celles que tu emploieras dès tes premières pages. Toutes se placent dans le <body>.
Les titres et les paragraphes
Le HTML propose six niveaux de titres, de <h1> (le plus important, en général le titre principal de la page) jusqu'à <h6> (le moins important). La lettre h vient de l'anglais heading, qui signifie « titre ». Entre les titres, le texte ordinaire se range dans des paragraphes <p>.
<h1>Les volcans</h1> <h2>Les éruptions</h2> <p>Un volcan peut dormir des siècles.</p>
Un volcan peut dormir des siècles.
Les listes
Pour énumérer des éléments, on utilise une liste non ordonnée <ul> (de l'anglais unordered list). Chaque élément de la liste est lui-même enveloppé dans une balise <li> (list item, « élément de liste »). Observe l'emboîtement, que tu connais désormais bien : les <li> sont contenus dans le <ul>.
<ul> <li>Pommes</li> <li>Poires</li> <li>Cerises</li> </ul>
- Pommes
- Poires
- Cerises
Les liens et les images
Voici enfin les deux balises qui méritent un attribut, comme annoncé au chapitre 2. Commençons par le lien.
Un lien est un texte sur lequel le visiteur peut cliquer pour être transporté vers une autre page. C'est exactement ce que tu fais des dizaines de fois par jour sur Internet : tu cliques sur un mot souligné, et te voilà ailleurs. C'est cela, un lien, et c'est même l'idée d'origine du Web (souviens-toi du « HyperText » du premier chapitre).
Le lien s'écrit avec la balise <a> (de l'anglais anchor, « ancre »). Elle fonctionne en deux temps. D'une part, le texte placé entre <a> et </a> est ce que le visiteur voit et sur quoi il clique. D'autre part, l'attribut href contient l'adresse de la page de destination, celle où le visiteur sera conduit. Quand il clique sur le texte, le navigateur quitte la page actuelle et va charger l'adresse écrite dans href.
Dans le lien ci-dessous, distingue bien ce que voit le visiteur de ce qui est caché dans l'attribut :
Le visiteur lit seulement « Voir Wikipédia » et clique dessus. L'adresse https://fr.wikipedia.org, elle, reste invisible : c'est elle qui indique au navigateur où aller une fois le clic effectué.
Passons à l'image, qui s'écrit <img>. C'est une balise auto-fermante : elle n'entoure aucun texte, puisqu'une image n'a rien à contenir. Elle s'appuie sur deux attributs. L'attribut src (de l'anglais source) indique où trouver le fichier de l'image, par exemple son nom sur ton ordinateur. L'attribut alt donne une description écrite de l'image.
Un attribut précise le fonctionnement d'une balise. Il s'écrit dans la balise d'ouverture sous la forme nom="valeur". Ainsi href indique la destination d'un lien, src l'emplacement d'une image, et alt sa description écrite.
À ses débuts, le Web ne montrait que du texte : aucune image ne pouvait apparaître au milieu d'une page. En 1993, un navigateur nommé Mosaic, développé aux États-Unis, fut l'un des premiers à afficher les images directement dans le texte grâce à la balise <img>. L'effet fut spectaculaire : le Web cessa d'être réservé aux scientifiques et commença à attirer le grand public, séduit par ces pages enfin illustrées.
L'attribut alt de l'image n'est pas un détail facultatif. Une personne aveugle navigue sur le Web à l'aide d'un logiciel qui lit la page à voix haute. Quand ce logiciel rencontre une image, il lit le texte de l'attribut alt. Bien remplir ce texte, c'est rendre une page accessible à tous : c'est une marque de soin envers ses visiteurs.
Rassemblons tout ce que tu as appris dans une seule petite page. Tu reconnais le squelette du chapitre 3, garni du contenu du chapitre 4 :
| Balise | Rôle | Va par paire ? |
|---|---|---|
<h1> à <h6> | Titres, du plus au moins important | Oui |
<p> | Paragraphe de texte | Oui |
<strong> | Texte important | Oui |
<ul> et <li> | Liste et éléments de liste | Oui |
<a> | Lien (attribut href) | Oui |
<img> | Image (attributs src, alt) | Non (auto-fermante) |
- Six niveaux de titres, de
<h1>à<h6>; le texte ordinaire va dans<p>. - Une liste
<ul>contient des éléments<li>. - Le lien
<a>utilise l'attributhref; l'image<img>utilisesrcetalt.
🛠️ Exercices pratiques
À toi de jouer. Pour les exercices d'écriture, tu peux répondre dans les espaces prévus. Mais le plus instructif est d'écrire ton code dans un vrai fichier et de le voir s'afficher dans un navigateur. Voici la marche à suivre, exactement comme le faisaient les premiers créateurs de sites.
Tu n'as besoin d'aucun logiciel spécial : un simple éditeur de texte suffit.
- Ouvre un éditeur de texte. Sur Windows, c'est le Bloc-notes ; sur Mac, c'est TextEdit (réglé en « format texte seul »).
- Tape ton code HTML, ou recopie celui d'un exemple du cours.
- Enregistre le fichier en lui donnant un nom qui se termine par
.html, par exemplema-page.html(et nonma-page.txt). C'est cette terminaison qui prévient l'ordinateur : « ce fichier est une page web ». - Va retrouver ton fichier sur l'ordinateur et double-clique dessus : il s'ouvre tout seul dans ton navigateur, transformé en vraie page. Chaque fois que tu modifies le code et que tu enregistres, il suffit d'actualiser la page pour voir le changement.
Le corrigé se trouve à la suite des exercices : ne le consulte qu'après avoir cherché par toi-même.
Une seule de ces trois lignes referme correctement un paragraphe ouvert par <p>. Entoure la bonne et explique en une phrase pourquoi les deux autres sont fausses.
Le code suivant contient une erreur d'emboîtement. Repère-la et réécris la ligne correctement.
Voici un squelette de page auquel il manque trois éléments, remplacés par des pointillés. Complète chaque pointillé.
Dans cette ligne, identifie la balise, l'attribut et la valeur de l'attribut.
Balise :
Attribut :
Valeur de l'attribut :
Écris une petite page complète (avec son squelette) qui présente ton animal préféré. Elle doit contenir : un titre principal, un paragraphe de présentation, et une liste d'au moins deux qualités de cet animal. Écris ton code dans le cadre ci-dessous.
✅ Corrigé des exercices
À ne consulter qu'après avoir cherché par toi-même. Pour l'exercice 5, plusieurs réponses sont correctes : la proposition ci-dessous n'est qu'un exemple parmi d'autres.
La bonne réponse est b) </p>. La réponse a) est une balise d'ouverture, pas une fermeture. La réponse c) utilise une barre oblique inversée (\) au lieu de la barre oblique normale (/) ; en HTML, une fermeture s'écrit toujours avec /.
Le <strong> est ouvert à l'intérieur du paragraphe, mais on referme le paragraphe avant de refermer le <strong> : les éléments se croisent. Il faut refermer le dernier ouvert en premier. Ligne corrigée :
Les trois éléments manquants sont, dans l'ordre : head, head (pour la fermeture) et p. Squelette complété :
La balise est a. L'attribut est href. La valeur de l'attribut est https://www.cern.ch (le texte écrit entre les guillemets). Quant à « Le CERN », c'est le contenu du lien, c'est-à-dire le texte sur lequel on clique.
Exemple de réponse correcte parmi beaucoup d'autres :
Ta page est juste si elle possède son squelette complet, un seul <h1>, au moins un <p>, et une liste <ul> contenant au moins deux <li> correctement fermés.
📖 Lexique
nom="valeur". Exemple : href pour la destination d'un lien.< et >) qui indique le rôle d'un contenu. La plupart vont par paire : ouverture puis fermeture.< et > qui encadrent une balise.