Anatomie d'un document HTML

Comprendre la structure de base de tout document web

Un document HTML est un fichier texte que le navigateur interprète pour afficher une page web. Avant d'apprendre les balises, il faut comprendre la structure minimale que tout document HTML doit respecter.

index.html

html

1<!DOCTYPE html>
2<html lang="fr">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Ma première page</title>
7  </head>
8  <body>
9    <h1>Bonjour le monde !</h1>
10    <p>Bienvenue sur ma première page web.</p>
11  </body>
12</html>

Décryptage ligne par ligne

`<!DOCTYPE html>` — Déclare au navigateur qu'il s'agit d'HTML5. Toujours en premier.
`<html lang="fr">` — Élément racine. lang aide les lecteurs d'écran et les moteurs de recherche.
`<head>` — Métadonnées invisibles : charset, viewport, titre, CSS externe.
`<meta charset="UTF-8">` — Encodage qui supporte les accents et caractères spéciaux.
`<meta name="viewport">` — Essentiel pour le responsive design mobile.
`<body>` — Tout ce que l'utilisateur voit.

Valide ton HTML

Utilise validator.w3.org pour vérifier que ton HTML est valide. Les erreurs de structure peuvent causer des comportements inattendus entre navigateurs.

À retenir

Le <head> contient les informations pour la machine, le <body> contient les informations pour l'utilisateur. Ne jamais mettre du contenu visible dans le <head>.

Topics and skills covered

HTML
Sémantique web
Structure de document

Les balises sémantiques HTML5

Ch.1