Chaque affaire a un dossier.
Chaque page web a une structure.
Si tu la bâcles, tout s’effondre.
🎯 Objectifs d’apprentissage
À la fin de ce module, vous saurez :
- Maîtriser la structure fondamentale d’un document HTML
- Comprendre la syntaxe (comment on écrit) et la sémantique (ce que ça signifie)
- Lire une page HTML comme un inspecteur lit un rapport d’autopsie
🧠 Anatomie d’un document HTML
Une page HTML, c’est un corps étendu sur la table.
À nous de comprendre comment il est assemblé.
Voici le strict minimum légal :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
</head>
<body>
<!-- Contenu visible -->
</body>
</html>
Rien de plus. Rien de moins. Tout le reste se greffe là-dessus.
📜 Le DOCTYPE — La juridiction
<!DOCTYPE html>
Sans lui, le navigateur hésite. Avec lui, il sait à quelle loi obéir.
- Indique que le document utilise HTML5
- Évite le quirks mode (comportement bancal des navigateurs)
- Toujours en première ligne
Un oubli ici, et toute l’affaire est compromise.
🌍 L’attribut lang — L’accessibilité
<html lang="fr">
Ce détail n’en est pas un.
- Aide les lecteurs d’écran
- Améliore le référencement
- Indique la langue principale du document
Un bon flic pense aussi aux témoins invisibles.
🧩 <head> et <body> — Deux mondes séparés
🧠 <head> — Les informations confidentielles
Rien de visible ici. Mais tout ce qui compte.
- Métadonnées
- SEO
- Encodage
- Titre
- Liens CSS
- Scripts
👀 <body> — La scène visible
Tout ce que l’utilisateur voit :
- Textes
- Images
- Boutons
- Formulaires
- Contenu interactif
Si ce n’est pas dans le body, ça n’existe pas pour le public.
🏷️ Les éléments de base HTML
🔓 Balises ouvrantes et fermantes
<p>Un paragraphe</p>
- Une balise d’ouverture
- Une balise de fermeture
- Du contenu entre les deux
Classique. Efficace.
⚡ Balises auto-fermantes
<meta charset="UTF-8">
<img src="photo.jpg" alt="preuve">
Pas de contenu. Pas de fermeture. Juste une action rapide.
🏷️ Les attributs — Les détails qui parlent
<a href="index.html" target="_blank">Lien</a>
Structure :
nom="valeur"
- Donnent des informations supplémentaires
- Modifient le comportement de l’élément
- Indispensables pour l’accessibilité et le SEO
Les petits détails font tomber les grands criminels.
💬 Les commentaires — Les notes personnelles
<!-- Ceci est un commentaire -->
- Invisibles pour l’utilisateur
- Lisibles dans le code
- Utiles pour expliquer, organiser, prévenir
Mais attention : le navigateur lit tout, même ce que vous vouliez cacher.
📐 Indentation et lisibilité
Un bon code se lit sans effort.
<body>
<main>
<h1>Titre</h1>
<p>Texte</p>
</main>
</body>
- Indentation cohérente
- Structure claire
- Moins d’erreurs
- Plus de respect pour les collègues (et votre futur vous)
Le chaos n’aide jamais une enquête.
🧠 L’en-tête HTML (<head>) en détail
🏷️ <title> — Le nom sur le dossier
<title>Titre de la page</title>
- Apparaît dans l’onglet du navigateur
- Utilisé par les moteurs de recherche
- Court, clair, précis
🔤 <meta charset="UTF-8"> — L’encodage
- Supporte les accents
- Évite les caractères cassés
- Obligatoire aujourd’hui
Sans ça, les mots deviennent illisibles. Et une vérité illisible est une vérité perdue.
📱 Viewport — Le responsive design
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Indispensable pour mobile
- Contrôle le zoom et l’échelle
- Sans lui, votre site est figé dans le passé
🔍 SEO — Description et mots-clés
<meta name="description" content="Description de la page">
<meta name="keywords" content="html, web, structure">
- Aident les moteurs de recherche
- Influencent le taux de clic
- Doivent rester honnêtes et pertinents
Mentir dans un rapport finit toujours par se voir.
Fin du module 2. La structure est en place. Au prochain module, on commence à remplir le dossier.