La structure d'un document HTML

Éléments, attributs et squelette obligatoire.

◷ 15 minutesTravail sur votre machine

Objectifs

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

expliquer ce qu'est un élément, une balise et un attribut ;
reconnaître le squelette obligatoire d'une page ;
comprendre l'arborescence (l'arbre DOM en germe).

Élément = balise ouvrante + contenu + balise fermante

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

Quelques éléments n'ont pas de contenu et se ferment sur eux-mêmes : <img ...>, <br>, <input ...>.

Les attributs

Les attributs complètent les balises par des informations :

<a href="https://exemple.fr">Un lien</a>
<img src="photo.jpg" alt="Portrait de Paul" width="300">

href indique la destination du lien, src la source de l'image. L'attribut alt est indispensable : il décrit l'image pour les lecteurs d'écran et s'affiche si l'image ne charge pas.

Le squelette obligatoire

<!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>

Rôles :

<!DOCTYPE html> : déclare le mode moderne ;
<head> : métadonnées invisibles (encodage, titre d'onglet, viewport pour mobile) ;
<body> : tout ce qui s'affiche.

Sans le meta viewport, les téléphones affichent la page « en miniature » — gardez-le systématiquement.

Un arbre, déjà

Les éléments s'emboîtent comme des poupées :

html
└── body
    ├── h1
    ├── p
    └── ul
        ├── li
        └── li

Cette hiérarchie est exactement ce que le navigateur transformera en DOM (chapitre fonctionnement du navigateur) et ce que JavaScript parcourra avec querySelector. Chaque balise bien fermée est un nœud propre de cet arbre.

Exercice

Créez page.html avec le squelette complet, ouvrez-le dans un navigateur.
Ajoutez-y : un titre principal, un paragraphe, une liste de trois courses.
Cassez volontairement : supprimez </p>. Que fait le navigateur ? Que concluez-vous sur sa tolérance ?
Ajoutez un lien vers votre site préféré qui s'ouvre dans un nouvel onglet (target="_blank").

Résumé

Élément = balises + contenu ; attributs = paramètres.
head = invisible et essentiel ; body = visible.
HTML est un arbre : chaque imbrication compte.

Correction disponibleCherchez d’abord par vous-même.Voir la correction

Correction

Réponses détaillées

Question 3. Le navigateur « répare » silencieusement et affiche quand même quelque chose. C'est utile mais dangereux : une erreur de structure peut produire un rendu inattendu ailleurs. Les validateurs HTML (validator.w3.org) détectent ce que le navigateur pardonne.