La structure d'un document HTML

Objectifs

À la fin de cette leçon, vous saurez :

• distinguer balise, élément et attribut — trois mots souvent confondus ;
• reconnaître le squelette obligatoire d'une page et justifier chaque ligne ;
• représenter un document comme un arbre (le DOM en germe) ;
• prédire le comportement du navigateur face à une erreur de structure.

🔗 Pour vous rafraîchir la mémoire : parler TCP à la main

HTML : décrire, pas dessiner

Après douze chapitres d'infrastructure, vous allez enfin écrire ce que l'utilisateur voit. Mais attention au renversement de mentalité : HTML ne « dessine » pas une page — il décrit sa structure et son sens (« ceci est un paragraphe », « ceci est un lien »). Le rendu visuel est l'affaire du CSS (chapitre suivant). Cette séparation structure/présentation est LA clé de voûte du web : elle rend les pages accessibles, indexables et maintenables.

Concrètement : un fichier .html est du texte brut — créez-le avec nano ou n'importe quel éditeur, ouvrez-le dans un navigateur, et celui-ci interprète la description pour construire l'affichage.

Balise, élément, attribut : trois mots, trois choses

<p>Bonjour le monde.</p>
└┬┘ └─────┬──────┘ └┬┘
balise   contenu   balise
ouvrante            fermante

• La balise est le marqueur textuel : <p> ouvrant, </p> fermant ;
• L'élément est le TOUT : balise ouvrante + contenu + balise fermante. On dit « cet élément p », pas « cette balise p » ;
• Les attributs paramètrent l'élément, TOUJOURS dans la balise ouvrante :

<a href="https://exemple.fr" target="_blank">Un lien</a>
└┬ └─┬─┘                └──┬──┘
 │   attribut             attribut
élément a

Cas particulier : certains éléments n'ont pas de contenu et se ferment sur eux-mêmes (éléments vides) : <img src="..." alt="...">, <br>, <input type="text">. Rien entre eux et leur fermeture n'aurait de sens : une image n'enveloppe pas d'autre contenu.

Règle d'or de l'imbrication : le dernier ouvert se referme en premier :

<p>Ceci est <strong>très important</strong>.</p>     ✓ correct
<p>Ceci est <strong>très important.</p></strong>     ✗ croisé — jamais

Le squelette obligatoire, ligne par ligne

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ma page</title>
</head>
<body>
  <p>Le contenu visible va ici.</p>
</body>
</html>

Chaque ligne a un rôle précis — aucune n'est décorative :

Ligne	Rôle	Ce qui se passe sans elle
<!DOCTYPE html>	active le mode moderne du navigateur	mode « quirks » : rendu aux règles anciennes, incohérences garanties
<html lang="fr">	langue du document	lecteurs d'écran prononcent avec la mauvaise voix, traducteurs se trompent
<meta charset="UTF-8">	encodage des caractères	accents cassés : « élément » au lieu de « élément »
<meta name="viewport"...>	adaptation aux mobiles	page affichée en miniature sur téléphone
<title>	titre de l'onglet + résultat de recherche	onglet anonyme, SEO dégradé
<head> / <body>	invisible / visible	confusion généralisée

Deux lignes méritent un mot de plus car elles sont invisibles quand présentes et catastrophiques quand absentes : le charset (vos utilisateurs voient des caractères mojibake dès le premier accent) et le viewport (sans lui, le mobile zoome out et votre site paraît cassé — il sera systématique au chapitre responsive).

Un arbre, déjà

Les éléments s'emboîtent comme des poupées russes — et cette imbrication forme un ARBRE, au sens exact du chapitre fichiers :

html
├── head
│   ├── meta
│   └── title
└── body
    ├── h1
    ├── p
    └── ul
        ├── li
        └── li

Ce n'est pas une métaphore pédagogique : c'est littéralement la structure que le navigateur construit en interne — le DOM (Document Object Model) — et que JavaScript parcourra au chapitre 16 avec querySelector. Vocabulaire d'arbre repris tel quel : parent, enfant, descendant. Chaque balise bien fermée est un nœud propre ; chaque croisement mal fermé déforme l'arbre.

Quand vous vous trompez : la tolérance du navigateur

Faites l'expérience maintenant : supprimez volontairement un </p> de votre page et rechargez.

Le navigateur ne plante pas. Il répare silencieusement, devine vos intentions, ferme ce qu'il faut, et affiche quelque chose de plausible. C'est à la fois admirable (le web résiste aux erreurs humaines depuis 30 ans) et piégeux : une erreur de structure peut produire un rendu inattendu ailleurs dans la page, sans AUCUN message d'erreur — l'équivalent HTML de l'erreur logique vue au chapitre débogage !

Réflexes professionnels compensatoires :

1. Valider : validator.w3.org signale tout ce que le navigateur pardonne ;
2. Inspecter : DevTools (F12, onglet Elements) montre l'arbre réellement construit — pas celui que vous CROYEZ avoir écrit ;
3. Indenter soigneusement : une structure bien indentée révèle visuellement les fermetures manquantes.

Exercice

1. Créez page.html avec le squelette complet ; ouvrez-le dans un navigateur et vérifiez le title dans l'onglet.
2. Ajoutez dans le body : un titre principal (h1), un paragraphe, une liste non ordonnée de trois courses.
3. Cassez volontairement : supprimez </p>. Que fait le navigateur ? Ouvrez DevTools (F12) et comparez l'arbre affiché avec votre intention.
4. Ajoutez un lien externe s'ouvrant dans un nouvel onglet (target="_blank"), puis un lien vers une ancre interne (id).
5. Testez sans le meta viewport via l'émulation mobile des DevTools (mode responsive) : que constatez-vous ?

Résumé

• Élément = balises + contenu ; attribut = paramètre dans la balise ouvrante.
• Squelette obligatoire : DOCTYPE, lang, charset, viewport, title — chacun protège contre un échec précis.
• HTML = arbre : imbrication stricte, dernier ouvert premier fermé.
• Le navigateur pardonne en silence : valider + inspecter compensent.

<h1>Mes courses</h1>
<p>Pour ce soir :</p>
<ul>
  <li>Pain</li>
  <li>Lait</li>
  <li>Fraises</li>
</ul>