🌍 1. C’est quoi HTML ?
HTML veut dire HyperText Markup Language.
👉 C’est le langage qui sert à créer la structure d’un site web.
👉 Il ne fait pas le design (ça c’est CSS).
👉 Il ne fait pas les animations (ça c’est JavaScript).
HTML = le squelette d’un site.
🏗 2. La structure de base d’une page HTML
Voici la base obligatoire :
< !DOCTYPE html>
<html>
<head>
<title>Ma page</title>
</head>
<body>
Contenu ici
</body>
</html>
Explication simple :
< !DOCTYPE html> → dit au navigateur qu’on utilise HTML5
<html> → tout le site est dedans
<head> → informations invisibles
<title> → titre dans l’onglet
<body> → tout ce qu’on voit à l’écran
📝 3. Les balises indispensables pour débuter
On commence par les plus importantes seulement.
🔹 1. Les titres
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
👉 h1 = grand titre (1 seul par page recommandé)
👉 h2 = sous-titre
🔹 2. Les paragraphes
<p>Je suis un paragraphe.</p>
👉 Sert à écrire du texte.
🔹 3. Les liens
<a href="[Link] sur Google</a>
👉 href = adresse du lien
🔹 4. Les images
<img src="[Link]" alt="Description">
👉 src = chemin de l’image
👉 alt = description de l’image
🔹 5. Les listes
Liste avec points :
<ul>
<li>Pomme</li>
<li>Banane</li>
</ul>
Liste numérotée :
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
</ol>
🔹 6. Les boutons
<button>Clique moi</button>
📦 4. Exemple ultra simple d’un mini site
Copie ça dans un fichier [Link] :
< !DOCTYPE html>
<html>
<head>
<title>Mon premier site</title>
</head>
<body>
<h1>Bienvenue sur mon site</h1>
<p>Je suis en train d’apprendre le HTML.</p>
<h2>Mes fruits préférés</h2>
<ul>
<li>Mangue</li>
<li>Orange</li>
<li>Banane</li>
</ul>
<a href= »[Link] »>Clique ici</a>
</body>
</html>
👉 Ensuite ouvre le fichier dans ton navigateur.
🧠 Règle très importante
La plupart des balises ont :
<balise>Contenu</balise>
Exemple :
<p>Bonjour</p>
<p> ouvre
</p> ferme
⚠️Toujours fermer les balises !
🔹 7. Les balises de structure sémantique (HTML5)
Très importantes en HTML5 👇
<header>
👉 En-tête d’une page ou section.
<header>
<h1>Mon site</h1>
</header>
<nav>
👉 Menu de navigation.
<nav>
<a href= »# »>Accueil</a>
<a href= »# »>Contact</a>
</nav>
<section>
👉 Section de contenu.
<section>
<h2>Nos services</h2>
</section>
<article>
👉 Contenu indépendant (article, blog, news).
<article>
<h2>Article 1</h2>
<p>Contenu…</p>
</article>
<footer>
👉 Pied de page.
<footer>
© 2026 Mon site
</footer>
🔹 7. Les conteneurs
<div>
👉 Conteneur générique (très utilisé).
<div>
Contenu
</div>
🔹 8. Les formulaires
<form>
👉 Crée un formulaire.
<form>
</form>
<input>
👉 Champ de saisie.
<input type= »text »>
<input type= »email »>
<input type= »password »>
<label>
👉 Étiquette d’un champ.
<label>Nom</label>
<input type= »text »>
<textarea>
👉 Zone de texte longue.
<textarea></textarea>
<button>
👉 Bouton.
<button>Envoyer</button>
🔹 9. Les tableaux
<table>
👉 Tableau.
<tr>
👉 Ligne.
<td>
👉 Cellule.
<th>
👉 Cellule d’en-tête.
<table>
<tr>
<th>Nom</th>
<th>Âge</th>
</tr>
<tr>
<td>Paul</td>
<td>25</td>
</tr>
</table>
🔹 Exemple complet d’une petite page HTML
< !DOCTYPE html>
<html>
<head>
<meta charset= »UTF-8 »>
<title>Ma première page</title>
</head>
<body>
<header>
<h1>Bienvenue</h1>
</header>
<section>
<p>Ceci est un site en HTML5.</p>
<a href= »# »>Clique ici</a>
</section>
<footer>
© 2026
</footer>
</body>
</html>
📌 Résumé pédagogique
HTML sert à :
Structurer une page
Organiser le contenu
Donner du sens (balises sémantiques)
Créer des formulaires
Ajouter images, liens, tableaux
Avec ça tu peux déjà créer un site en HTML