📘 Cours HTML complet (≈ 10 pages)
1. Introduction au HTML
HTML signifie HyperText Markup Language.
C’est le langage de base utilisé pour créer des pages web.
👉 Son rôle :
Structurer le contenu
Organiser le texte, images, liens
Former la base de tous les sites web
⚠️Important :
HTML ne fait pas le design → ça, c’est le rôle du CSS.
2. Structure d’une page HTML
Une page HTML a toujours cette base :
<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Explication :
<!DOCTYPE html> → indique que c’est du HTML5
<html> → racine du document
<head> → infos invisibles (titre, meta…)
<body> → contenu visible
3. Les balises HTML
Une balise = structure du contenu.
Exemple :
<p>Texte</p>
<p> → ouverture
</p> → fermeture
Types de balises :
Balises avec contenu : <p>...</p>
Balises vides : <br>, <img>
4. Les titres et paragraphes
Titres :
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>...</h3>
👉 Il y a 6 niveaux (h1 → h6)
Paragraphes :
<p>Ceci est un paragraphe.</p>
Saut de ligne :
<br>
5. Les liens (hyperliens)
Permettent de naviguer entre pages :
<a href="[Link] sur Google</a>
Ouvrir dans un nouvel onglet :
<a href="[Link] target="_blank">Lien</a>
6. Les images
<img src="[Link]" alt="description">
Explication :
src → chemin de l’image
alt → description (important pour accessibilité)
7. Les listes
Liste non ordonnée :
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Liste ordonnée :
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
8. Les tableaux
<table>
<tr>
<th>Nom</th>
<th>Age</th>
</tr>
<tr>
<td>Ali</td>
<td>20</td>
</tr>
</table>
Structure :
<table> → tableau
<tr> → ligne
<td> → cellule
<th> → titre
9. Les formulaires
Permettent de récupérer des données utilisateur :
<form>
<input type="text" placeholder="Nom">
<input type="password" placeholder="Mot de passe">
<button>Envoyer</button>
</form>
Types d’input :
text
password
email
number
checkbox
10. Les attributs HTML
Les attributs ajoutent des infos aux balises :
<a href="[Link]
👉 href est un attribut
Autres exemples :
class
id
style
11. HTML + CSS
HTML structure, CSS stylise :
<p style="color:red;">Texte rouge</p>
Mais mieux vaut utiliser un fichier CSS :
<link rel="stylesheet" href="[Link]">
12. HTML sémantique (important)
Permet d’organiser correctement le site :
<header></header>
<nav></nav>
<main></main>
<section></section>
<footer></footer>
👉 Avantages :
Meilleur référencement (SEO)
Code plus propre
Plus professionnel
13. Bonnes pratiques
✔ Toujours fermer les balises
✔ Indenter le code
✔ Utiliser des noms clairs
✔ Éviter le code inutile
14. Exemple de page complète
<!DOCTYPE html>
<html>
<head>
<title>Mon site</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Mon premier site web</p>
<a href="[Link]
<img src="[Link]" alt="image">
</body>
</html>
16. Les balises sémantiques avancées
HTML5 a introduit des balises importantes :
<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
Rôle :
<header> → en-tête
<nav> → menu
<main> → contenu principal
<section> → section
<article> → contenu indépendant (ex: blog)
<aside> → contenu secondaire
<footer> → pied de page
👉 Très important pour le SEO et la structure propre
17. Les classes et les ID
ID (unique) :
<h1 id="titre">Bonjour</h1>
Class (réutilisable) :
<p class="texte">Hello</p>
<p class="texte">World</p>
👉 Différence :
id = une seule fois
class = plusieurs fois
18. Les commentaires
Permettent d’expliquer ton code :
<!-- Ceci est un commentaire -->
👉 Non visible dans la page
19. Les médias (audio & vidéo)
Vidéo :
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>
Audio :
<audio controls>
<source src="audio.mp3" type="audio/mp3">
</audio>
20. Les iframes (intégration)
Permet d’intégrer un autre site :
<iframe src="[Link] width="500" height="300"></iframe>
👉 Exemple : intégrer une vidéo YouTube
21. Les meta tags (important)
Dans <head> :
<meta charset="UTF-8">
<meta name="description" content="Mon site web">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pourquoi ?
SEO (Google)
Responsive (mobile)
Encodage des caractères
22. Le responsive design
Adapter le site aux téléphones :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
👉 Sans ça → ton site sera cassé sur mobile
23. Les entités HTML
Pour afficher certains caractères :
< = <
> = >
& = &
Exemple :
<p><h1>Titre</h1></p>
24. Les attributs globaux
Disponibles sur presque toutes les balises :
class
id
style
title
hidden
Exemple :
<p title="info">Passe la souris ici</p>
25. Accessibilité (très important)
Faire un site utilisable pour tous :
✔ Toujours utiliser alt pour images
✔ Utiliser des titres (h1 → h6) correctement
✔ Éviter uniquement les couleurs pour transmettre une info
26. SEO de base (Google)
Pour bien apparaître :
✔ Utiliser <title>
✔ Utiliser <meta description>
✔ Structurer avec <h1>
✔ Utiliser des mots-clés
27. Organisation d’un projet HTML
Exemple :
/mon-site
│
├── [Link]
├── [Link]
├── [Link]
└── images/
👉 Toujours organiser proprement
28. Erreurs fréquentes à éviter
❌ Oublier de fermer une balise
❌ Mal imbriquer les balises
❌ Trop utiliser style directement
❌ Ne pas structurer le code
29. Mini projet (très important)
Voici un exemple de site simple :
<!DOCTYPE html>
<html>
<head>
<title>Mon site</title>
</head>
<body>
<header>
<h1>Mon site</h1>
</header>
<nav>
<a href="#">Accueil</a>
<a href="#">Contact</a>
</nav>
<main>
<section>
<h2>Bienvenue</h2>
<p>Mon premier site</p>
</section>
</main>
<footer>
<p>© 2026</p>
</footer>
</body>
</html>
31. Les attributs data-* (très utilisés)
Permettent de stocker des données personnalisées :
<div data-user="Hama" data-id="123"></div>
👉 Utilisé avec JavaScript plus tard.
32. Les balises inline vs block
Block (prend toute la ligne) :
<div>
<p>
<section>
Inline (reste sur la même ligne) :
<span>
<a>
<strong>
Exemple :
<p>Texte <span>important</span></p>
33. La balise <div> et <span>
<div> :
Conteneur principal
<div>
<p>Contenu</p>
</div>
<span> :
Petit élément inline
<p>Texte <span style="color:red;">rouge</span></p>
34. Les attributs ARIA (accessibilité avancée)
<button aria-label="Fermer">X</button>
👉 Permet aux lecteurs d’écran de comprendre ton site
35. Les formulaires avancés
<form>
<input type="email" required>
<input type="number" min="0" max="100">
<input type="date">
<input type="file">
</form>
👉 HTML peut déjà valider les données !
36. Validation HTML
Exemple :
<input type="email" required>
👉 Le navigateur empêche l’envoi si incorrect
37. Les balises <label>
Très important pour les formulaires :
<label for="name">Nom :</label>
<input id="name" type="text">
👉 Améliore accessibilité + UX
38. Les favicons (icône du site)
<link rel="icon" href="[Link]">
👉 Petite icône dans l’onglet du navigateur
39. Charger du JavaScript
<script src="[Link]"></script>
👉 Souvent placé avant </body>
40. Charger du CSS externe
<link rel="stylesheet" href="[Link]">
👉 Toujours dans <head>
41. Les attributs defer et async
<script src="[Link]" defer></script>
Différence :
defer → charge après HTML
async → charge direct (moins contrôlé)
42. HTML et performances
Pour un site rapide :
✔ Optimiser images
✔ Éviter trop de scripts
✔ Utiliser du HTML propre
43. Les balises <figure> et <figcaption>
<figure>
<img src="[Link]">
<figcaption>Description</figcaption>
</figure>
👉 Très propre pour les images
44. Les balises <mark>, <code>, <pre>
<mark>important</mark>
<code>print("hello")</code>
<pre>
texte formaté
</pre>
45. Les balises <details> et <summary>
<details>
<summary>Voir plus</summary>
<p>Contenu caché</p>
</details>
👉 Crée un menu déroulant sans JS
46. Les balises <progress> et <meter>
<progress value="50" max="100"></progress>
<meter value="0.7"></meter>
47. Les templates HTML
<template id="card">
<div>Carte</div>
</template>
👉 Utilisé avec JavaScript
48. Bonnes pratiques pro
✔ Toujours utiliser HTML sémantique
✔ Séparer HTML / CSS / JS
✔ Nommer correctement les classes
✔ Garder un code lisible
49. Sécurité basique (important)
HTML seul est safe, mais :
⚠️Attention aux formulaires
⚠️Toujours valider côté serveur
⚠️Éviter d’afficher des données sensibles
50. Structure pro d’un site
/site-pro
│
├── [Link]
├── pages/
├── css/
├── js/
├── images/
└── assets/
51. Workflow développeur
1. HTML → structure
2. CSS → design
3. JS → interactions
4. Test → correction
5. Mise en ligne
52. Hébergement d’un site
Tu peux héberger sur :
GitHub Pages
Netlify
Serveur perso
53. Différence HTML / DOM
HTML = fichier
DOM = version manipulable en JS
54. HTML et frameworks
HTML est utilisé dans :
React
Vue
Angular
👉 Toujours la base !
55. Mini projet avancé
<!DOCTYPE html>
<html>
<head>
<title>Site Pro</title>
</head>
<body>
<header>
<h1>Mon Portfolio</h1>
</header>
<main>
<section>
<h2>Projets</h2>
<article>
<h3>Projet 1</h3>
<p>Description</p>
</article>
</section>
</main>
<footer>
<p>Contact</p>
</footer>
</body>
</html>
🚀 Conclusion finale (vraiment finale)
Si tu maîtrises tout ce qu’on a vu :
👉 Tu es capable de :
Créer un site complet
Comprendre du code pro
Passer à CSS / JS sans problème