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!
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.
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.
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>.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.You now know what HTML is and what it's for. Time to practice: we'll write the full skeleton of a real page, with the doctype, the html tag, the head and the body, the foundations every browser expects.
Lesson 2: Page structure →