C'est quoi le HTML ?
HTML signifie HyperText Markup Language. C'est le squelette de chaque page web. Quand vous ouvrez un site, tout ce que vous voyez (texte, images, boutons) est décrit en HTML.
Le HTML n'est pas un langage de programmation. Il ne fait pas de calculs et ne prend pas de décisions. C'est un langage de balisage : il dit au navigateur « ceci est un titre », « ceci est un paragraphe », « ceci est un lien ».
Pensez-y comme le plan d'une maison. Le HTML dit où sont les murs, les portes et les fenêtres. Le CSS (qu'on verra plus tard) s'occupe de la peinture et de la déco. Le JavaScript fait fonctionner l'électricité.
Pourquoi apprendre le HTML si l'IA peut l'écrire ?
Bonne question. Claude et ChatGPT peuvent générer du HTML en quelques secondes. Mais l'IA fait des erreurs. Elle oublie de fermer des balises, elle utilise des structures obsolètes, elle mélange les concepts.
Si vous ne comprenez pas ce qu'elle produit, vous ne pouvez pas :
- Vérifier que le code est correct
- Corriger les bugs quand ça ne marche pas
- Modifier le résultat pour l'adapter à vos besoins
Apprendre le HTML, c'est apprendre à conduire avant d'utiliser le pilote automatique. Vous n'avez pas besoin de tout connaître par cœur, mais vous devez comprendre ce qui se passe.
Votre premier HTML
En HTML, on écrit du contenu entre des balises. Une balise s'ouvre avec <nom> et se ferme avec </nom>.
Voici deux balises essentielles :
<h1>: un titre principal (le plus grand)<p>: un paragraphe de texte
Essayez de modifier le code ci-dessous. Changez le texte, ajoutez un deuxième paragraphe, testez !
What is HTML?
HTML stands for HyperText Markup Language. It's the skeleton of every web page. When you open a website, everything you see — text, images, buttons — is described in HTML.
HTML is not a programming language. It doesn't do calculations or make decisions. It's a markup language: it tells the browser "this is a heading", "this is a paragraph", "this is a link".
Think of it like a house blueprint. HTML says where the walls, doors and windows go. CSS (which we'll cover later) handles the paint and decor. JavaScript makes the electricity work.
Why learn HTML if AI can write it?
Good question. Claude and ChatGPT can generate HTML in seconds. But AI makes mistakes. It forgets to close tags, uses outdated structures, and mixes up concepts.
If you don't understand what it produces, you can't:
- Verify the code is correct
- Fix bugs when things break
- Modify the result to fit your needs
Learning HTML is like learning to drive before using autopilot. You don't need to memorize everything, but you need to understand what's happening.
Your first HTML
In HTML, you write content between tags. A tag opens with <name> and closes with </name>.
Here are two essential tags:
<h1>— a main heading (the biggest)<p>— a text paragraph
Try modifying the code below. Change the text, add a second paragraph, experiment!
Crée ton premier vrai fichier
Le bac à sable ci-dessus est pratique pour s'entraîner, mais un vrai site web, c'est un fichier texte sur ton ordinateur. Voici le geste fondateur : en cinq minutes, tu as une vraie page web chez toi.
- Ouvre un éditeur de texte. VS Code est recommandé (gratuit, téléchargeable sur code.visualstudio.com). Le Bloc-notes Windows ou TextEdit Mac font aussi l'affaire pour démarrer.
- Crée un nouveau fichier et colle ce squelette minimal :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma page</title>
</head>
<body>
<h1>Bonjour le monde</h1>
<p>Mon premier fichier HTML.</p>
</body>
</html>- Enregistre le fichier sous le nom
index.html(pas.txt: bien.html). - Double-clique sur le fichier dans ton explorateur. Le navigateur l'ouvre directement.
- Modifie le texte, enregistre (Ctrl+S ou Cmd+S), puis recharge la page (F5 ou Cmd+R). Tu vois le changement immédiatement.
C'est ça, l'essentiel : une page web est un simple fichier texte. Pas de serveur, pas de logiciel spécial. Juste un fichier et un navigateur.
index.html comme nom ? Par convention, c'est le fichier que les serveurs web chargent en premier quand on visite un dossier. Tape www.example.com/ dans un navigateur : le serveur sert automatiquement index.html. Nomme toujours ta page d'accueil ainsi.
Le bac à sable de ce cours reste là pour tester rapidement des idées. Le fichier réel, lui, c'est chez toi : tu peux le partager, le modifier, le publier.
Create your first real file
The sandbox above is handy for practice, but a real website is a text file on your computer. Here's the foundational move: in five minutes, you'll have a real web page of your own.
- Open a text editor. VS Code is recommended (free, download from code.visualstudio.com). Notepad on Windows or TextEdit on Mac work too when you're just getting started.
- Create a new file and paste this minimal skeleton:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
</head>
<body>
<h1>Hello world</h1>
<p>My first HTML file.</p>
</body>
</html>- Save the file as
index.html(not.txt: make sure the extension is.html). - Double-click the file in your file explorer. Your browser opens it directly.
- Edit the text, save (Ctrl+S or Cmd+S), then reload the page (F5 or Cmd+R). You see the change instantly.
That's the core idea: a web page is just a text file. No server, no special software. Just a file and a browser.
index.html as the name? By convention, it's the file web servers load first when someone visits a folder. Type www.example.com/ in a browser and the server automatically serves index.html. Always name your home page this way.
The course sandbox is still there for quick experimentation. Your real file lives on your machine: you can share it, modify it, publish it.
🎯 Pratique
S'entraîner (clique pour ouvrir) :
✨ Prompt IA
Copiez ce prompt dans Claude ou ChatGPT :
Explique-moi ce qu'est le HTML en 3 phrases simples comme si j'avais 10 ans. Puis donne-moi 3 balises HTML essentielles avec un exemple pour chacune.
💬 Ré-explique sans regarder
Sans relire la réponse de l'IA : reprends l'image de la maison et explique, avec tes mots, à quoi sert le HTML par rapport au CSS et au JavaScript.
HTML est la structure (les murs, les portes, les fenêtres : titres, paragraphes, liens) ; le CSS est la déco (peinture, couleurs, mise en page) ; le JavaScript est l'électricité (ce qui réagit et fait des actions). Le HTML ne calcule rien et ne décide rien : il décrit ce qu'est chaque morceau de contenu.L'IA a généré ce code, mais il y a une erreur : la balise <h1> n'est pas correctement fermée. Trouvez et corrigez le problème.
⚖️ Juge le code de l'IA
Tu as demandé à l'IA un titre suivi de deux paragraphes. Elle propose ce code. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
<h1>Mon site</h1>
Bienvenue sur ma page.<br><br>
Merci de votre visite.<br> pour simuler des sauts de ligne. Chaque paragraphe devrait être enveloppé dans une balise <p> : c'est ça qui dit au navigateur « ceci est un paragraphe ». Les <br> ne font que pousser le texte vers le bas, sans donner de sens à la structure. Le bon code : <p>Bienvenue sur ma page.</p> puis <p>Merci de votre visite.</p>.🧠 Rappel libre
Sans remonter dans la leçon : qu'est-ce qu'un langage de balisage (par opposition à un langage de programmation), et comment s'ouvre puis se ferme une balise comme <p> ?
HTML d'un langage de programmation. Une balise s'ouvre avec <p> et se ferme avec </p> (le / marque la fermeture) ; le contenu se place entre les deux.Vous savez maintenant ce qu'est le HTML et à quoi il sert. Place à la pratique : on va écrire le squelette complet d'une vraie page, avec le doctype, la balise html, le head et le body, ces fondations que tout navigateur attend.
Leçon 2 : Structure d'une page →