Une page web n'est rien d'autre qu'un fichier texte. Ce cours explique ce que le navigateur y cherche : des balises, imbriquées les unes dans les autres, autour d'un squelette toujours identique.
Ouvre n'importe quel site, fais un clic droit, choisis « Afficher le code source de la page ». Ce que tu vois n'a rien de magique : c'est du texte. Un fichier que quelqu'un a tapé au clavier, et que ton navigateur a lu.
Apprendre le HTML, c'est apprendre à écrire ce texte de façon à ce que le navigateur le comprenne.
À la fin de ce cours, tu seras capable de :
Imagine que tu tapes ce texte dans un fichier :
Mon carnet de voyage
Rome, 3 jours en mai.Le navigateur affiche les deux phrases l'une derrière l'autre, sur la même ligne, dans la même taille. Il n'a aucun moyen de savoir que la première est un titre et la seconde un paragraphe. Pour lui, c'est du texte, point.
Le HTML — 🇬🇧 HyperText Markup Language, langage de balisage — sert exactement à ça : entourer chaque morceau de texte d'une étiquette qui dit ce qu'il est.
Une balise encadre du contenu et lui donne un sens.
<h1>Mon carnet de voyage</h1>Trois parties :
| Partie | Exemple | Rôle |
|---|---|---|
| La balise ouvrante | <h1> |
Elle annonce : « ce qui suit est un titre de niveau 1 » |
| Le contenu | Mon carnet de voyage |
Ce que le visiteur lira |
| La balise fermante | </h1> |
Elle annonce : « c'est fini » — remarque la barre oblique |
La barre oblique de la balise fermante est le détail que tout le monde oublie au début. Sans elle, le navigateur ne sait pas où s'arrête le titre : il continue, et tout le reste de la page devient un titre géant.
⚠️ Attention : une balise ouverte doit toujours être refermée. C'est la source numéro un des pages qui partent de travers.
Une balise peut en contenir une autre. On dit qu'elles sont imbriquées.
<p>Départ le <b>12 mai</b>, retour le 15.</p>Ici, <b> (qui met en gras) vit à l'intérieur de <p> (le paragraphe). Pense à des boîtes : la petite est entièrement rangée dans la grande.
Et c'est là qu'il y a une règle stricte : on ferme toujours dans l'ordre inverse de l'ouverture. La dernière ouverte est la première refermée.
<p>Départ le <b>12 mai</b>.</p> ✅ correct
<p>Départ le <b>12 mai</p></b> ❌ les boîtes se croisent💡 Astuce : décale ton code vers la droite à chaque niveau d'imbrication. Deux espaces suffisent, quatre c'est généralement mieux (question de goût). Ce décalage n'a aucun effet sur la page, mais il rend les erreurs visibles à l'œil nu.
Toute page web, du blog personnel au site d'une banque, commence par la même structure :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Carnet de voyage</title>
</head>
<body>
<h1>Mon carnet de voyage</h1>
</body>
</html>Ligne par ligne :
<!DOCTYPE html> prévient le navigateur qu'il lit du HTML moderne. Elle ne se ferme pas.<html lang="fr"> enveloppe toute la page et annonce qu'elle est en français.<head> contient tout ce qui parle de la page, sans jamais s'afficher dedans.<meta charset="utf-8"> indique comment lire les caractères accentués. Sans elle, « cybersécurité » risque de s'afficher cybersécurité.<title> donne son nom à l'onglet du navigateur.<body> contient tout ce que le visiteur voit.C'est la distinction à retenir de ce cours : <head> est invisible, <body> est visible.
Le texte du <title> n'apparaît nulle part dans la page. Pourtant il compte : c'est lui qui s'affiche dans l'onglet, dans les favoris et dans les résultats de recherche Google.
Pour t'en convaincre, vide le <body> et rouvre la page. Il ne reste plus rien à l'écran — mais l'onglet, lui, porte toujours son nom.
<h2>Rome</h2>, où est le contenu, et qu'est-ce qui le distingue des deux balises ?<p>Bonjour <b>Marie</p></b> est-il incorrect ?<head>. Le visiteur le verra-t-il ?<head> contient ce qui parle de la page ; <body> contient ce qu'on voit.<title> nomme l'onglet, pas la page.Le squelette est posé, mais la page est vide. On va la remplir : des titres pour la structurer, des paragraphes pour l'écrire.