Chapitre 222 minDébutant
Structure d'une page HTML : balises, squelette et texte
Par Josselyn C., prof de BTS SIO. Mis à jour le .
À la fin de ce chapitre, tu sauras
- écrire un élément, sa balise et ses attributs sans erreur ;
- construire le squelette complet d'une page HTML ;
- hiérarchiser les titres de
h1àh6et structurer le texte en paragraphes et en listes ; - distinguer éléments de bloc et éléments en ligne,
divetspan.
4 exercices corrigés1 schéma
Une page HTML est un fichier texte dont le contenu est entouré de balises qui disent au navigateur ce qu'est chaque morceau : un titre, un paragraphe, une liste. Ce chapitre explique la syntaxe des balises et des attributs, le squelette obligatoire de toute page (<!DOCTYPE>, <head>, <body>), puis les balises de texte que tu utiliseras dans chaque page.
Balises, éléments et attributs
Un élément HTML s'écrit le plus souvent avec une balise ouvrante, un contenu et une balise fermante :
<a href="agenda.html" class="lien-agenda">Voir l'agenda</a>
| Morceau | Nom | Rôle |
|---|---|---|
<a …> | balise ouvrante | début de l'élément, avec son nom (a, pour anchor) |
href="agenda.html" | attribut | une information supplémentaire : ici, la destination du lien |
class="lien-agenda" | attribut | un nom de classe, qui servira au CSS |
Voir l'agenda | contenu | ce qui s'affiche |
</a> | balise fermante | fin de l'élément, avec une barre oblique |
Les règles de syntaxe tiennent en quelques lignes :
- un attribut s'écrit
nom="valeur", avec des guillemets droits ; plusieurs attributs se séparent par une espace ; - certains attributs sont booléens : leur présence suffit (
<input required>,<details open>) ; - les noms de balises et d'attributs ne tiennent pas compte de la casse, mais on les écrit toujours en minuscules ;
- les éléments s'imbriquent sans se chevaucher : le dernier ouvert est le premier fermé.
<!-- Correct : strong est fermé avant p -->
<p>Entrée <strong>gratuite</strong> pour tous.</p>
<!-- Faux : les balises se chevauchent -->
<p>Entrée <strong>gratuite pour tous.</p></strong>
Certains éléments n'ont pas de contenu : ce sont les éléments vides (void elements). Ils n'ont pas de balise fermante : <img>, <br>, <hr>, <input>, <meta>, <link>. Tu verras parfois <br /> avec une barre oblique, une habitude héritée de XHTML : elle est tolérée mais inutile.
Quelques attributs globaux s'utilisent sur n'importe quel élément :
| Attribut | Rôle |
|---|---|
id | identifiant unique dans la page (cible d'un lien #ancre, d'un <label>, d'un script) |
class | une ou plusieurs classes séparées par des espaces, pour le CSS |
lang | langue du contenu (lang="en" sur une citation en anglais) |
title | info-bulle au survol ; peu fiable (invisible au clavier et sur mobile), à ne pas utiliser pour une information importante |
hidden | masque l'élément |
Les commentaires s'écrivent entre <!-- et -->. Le navigateur les ignore, mais ils restent visibles dans le code source : n'y mets jamais un mot de passe ou une information interne.
Le squelette d'une page HTML
Toute page commence par le même squelette. Le voici avec chaque ligne expliquée :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agenda des ateliers – Médiathèque des Tilleuls</title>
<meta name="description" content="Ateliers numériques, lectures et jeux : le programme de la médiathèque des Tilleuls, gratuit et ouvert à tous.">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Tout ce qui s'affiche dans la page -->
</body>
</html>
| Ligne | Rôle |
|---|---|
<!DOCTYPE html> | Toujours la première ligne. Sans elle, le navigateur passe en mode de compatibilité (quirks mode), qui imite les navigateurs des années 1990 : tailles de boîtes et de tableaux calculées autrement, rendu imprévisible. |
<html lang="fr"> | L'élément racine, qui contient tout. lang="fr" indique la langue : un lecteur d'écran choisit la bonne voix, le navigateur la bonne césure et le bon correcteur, Google la bonne langue de résultats. |
<head> | L'en-tête : des informations sur la page, qui ne s'affichent pas dedans. |
<meta charset="utf-8"> | L'encodage des caractères. Il doit figurer dans les 1 024 premiers octets du fichier : mets-le en premier dans le <head>. Sans lui, les accents peuvent s'afficher é au lieu de é. |
<meta name="viewport" …> | Indispensable sur mobile : sans elle, un téléphone affiche la page comme sur un écran de 980 pixels de large, puis la rétrécit, et tout devient minuscule (chapitre 10). |
<title> | Le titre de l'onglet, des favoris et, le plus souvent, le titre bleu cliquable dans les résultats de Google. Un titre unique et précis par page (chapitre 13). |
<meta name="description"> | Le résumé que Google affiche souvent sous le titre. |
<link rel="icon"> | L'icône de l'onglet (favicon). |
<link rel="stylesheet"> | Relie la feuille de style externe. |
<body> | Le corps : tout le contenu visible. |
L'indentation (décaler de deux espaces ce qui est à l'intérieur d'un élément) ne change rien à l'affichage : le navigateur ignore les espaces et retours à la ligne en trop. Elle sert à toi, et à celui qui relira ton code, pour voir d'un coup d'œil qui contient quoi. Dans VS Code, Maj+Alt+F réindente tout le fichier.
L'arbre du document (DOM)
Le navigateur transforme ton HTML en un arbre d'éléments, le DOM (Document Object Model). Chaque élément a un parent (l'élément qui le contient), éventuellement des enfants (les éléments qu'il contient) et des frères (les autres enfants du même parent).
<body>
<header>
<h1>Médiathèque des Tilleuls</h1>
</header>
<main>
<h2>Les ateliers de la semaine</h2>
<p>Inscription <strong>gratuite</strong> à l'accueil.</p>
<ul>
<li>Initiation à l'ordinateur</li>
<li>Club lecture</li>
</ul>
</main>
</body>
Ce vocabulaire n'est pas qu'une curiosité : les sélecteurs CSS (chapitre 6) visent les éléments par leur place dans cet arbre (« les li enfants de ul », « le p qui suit un h2 »), et JavaScript le parcourt pour modifier la page. Dans l'inspecteur du navigateur (F12), c'est cet arbre que tu vois, pas ton fichier : si tu as oublié de fermer une balise, l'inspecteur te montre où le navigateur a décidé de la fermer.
Les titres de h1 à h6
HTML propose six niveaux de titres, de <h1> (le plus important) à <h6>. Ils forment le plan de la page, comme les titres d'un rapport :
<h1>Agenda des ateliers</h1>
<h2>Ateliers numériques</h2>
<h3>Initiation à l'ordinateur</h3>
<h3>Démarches en ligne</h3>
<h2>Lecture et jeux</h2>
<h3>Club lecture ados</h3>
Trois règles :
- un seul
<h1>par page, qui annonce son sujet (souvent proche du<title>) ; - pas de saut de niveau : après un
<h2>, le titre suivant est un<h2>ou un<h3>, jamais directement un<h4>; - un titre sert à structurer, pas à grossir du texte : si tu veux un texte gros et gras qui n'est pas un titre, c'est du CSS.
Paragraphes, espaces et sauts de ligne
Le texte courant va dans des paragraphes <p>. Le navigateur fusionne les espaces : plusieurs espaces, tabulations ou retours à la ligne consécutifs s'affichent comme une seule espace.
<p>Ouvert du mardi
au samedi.</p>
s'affiche « Ouvert du mardi au samedi. » sur une ligne. Pour aller à la ligne à l'intérieur d'un paragraphe, dans une adresse ou un poème, utilise <br> :
<p>Médiathèque des Tilleuls<br>
12 rue des Écoles<br>
01 23 45 67 89</p>
N'enchaîne pas les <br> pour créer de l'espace entre deux blocs : c'est le rôle des marges en CSS. L'élément <hr> marque un changement de thème entre deux paragraphes (il s'affiche par défaut comme un trait horizontal).
Mettre du texte en valeur
Chaque balise de texte a un sens. Choisis-la pour ce qu'elle signifie, pas pour son apparence par défaut.
| Balise | Sens | Rendu par défaut |
|---|---|---|
<strong> | importance forte (« attention, c'est important ») | gras |
<em> | emphase, l'accent mis à l'oral | italique |
<mark> | passage surligné, pertinent dans le contexte (un résultat de recherche) | fond jaune |
<small> | mentions annexes, petites lignes | plus petit |
<abbr title="…"> | abréviation | souligné en pointillés selon le navigateur |
<code> | fragment de code | police à chasse fixe |
<q> | citation courte dans une phrase | entre guillemets |
<blockquote> | citation longue, en bloc | en retrait |
<sup>, <sub> | exposant, indice | (1er, CO2) |
<del>, <ins> | texte supprimé, ajouté | barré, souligné |
<b>, <i> | attirer l'œil sans importance particulière (mot-clé, terme étranger) | gras, italique |
<p>L'atelier <abbr title="Brevet informatique et internet">B2i</abbr> est
<strong>complet</strong> jusqu'au 30 juin.</p>
<p><small>Les horaires peuvent changer pendant les vacances scolaires.</small></p>
Les listes
HTML propose trois sortes de listes.
<!-- Liste non ordonnée : l'ordre n'a pas d'importance -->
<ul>
<li>Romans</li>
<li>Bandes dessinées</li>
<li>Jeux vidéo</li>
</ul>
<!-- Liste ordonnée : l'ordre compte (des étapes) -->
<ol>
<li>Présente ta carte à l'accueil.</li>
<li>Choisis un créneau.</li>
<li>Reçois la confirmation par e-mail.</li>
</ol>
<!-- Liste de définitions : des termes et leur description -->
<dl>
<dt>Prêt</dt>
<dd>10 documents pour 3 semaines.</dd>
<dt>Prolongation</dt>
<dd>Une fois, en ligne ou à l'accueil.</dd>
</dl>
Les seuls enfants autorisés de <ul> et <ol> sont des <li>. Une sous-liste se place dans un <li> :
<ul>
<li>Ateliers numériques
<ul>
<li>Initiation</li>
<li>Démarches en ligne</li>
</ul>
</li>
<li>Club lecture</li>
</ul>
L'élément <ol> accepte start="5" (commencer à 5), reversed (compte à rebours) et type="a" ou type="I" (lettres, chiffres romains). Un menu de navigation est, lui aussi, une liste de liens : c'est pourquoi tu verras souvent <nav><ul><li><a>… (chapitre 4).
Caractères spéciaux et entités
Le fichier étant en UTF-8, tu tapes directement é, ç, € ou «. Seuls quelques caractères posent problème, parce qu'ils ont un sens pour HTML : pour les afficher, on écrit une entité.
| Pour afficher | Entité | Pourquoi |
|---|---|---|
< | < | sinon le navigateur croit qu'une balise commence |
> | > | par symétrie |
& | & | le & annonce une entité |
" | " | dans la valeur d'un attribut entre guillemets |
| espace insécable | | empêche le retour à la ligne (10 €, M. Martin) |
<p>En PHP, on écrit <code>if ($age < 18)</code>.</p>
<p>Prix : 5 € pour les non-résidents.</p>
Éléments de bloc et éléments en ligne : div et span
Par défaut, les éléments se rangent en deux familles :
- les éléments de bloc (
<p>,<h1>,<ul>,<li>,<div>,<header>…) commencent sur une nouvelle ligne et prennent toute la largeur disponible : ils s'empilent ; - les éléments en ligne (
<a>,<strong>,<em>,<span>,<img>,<code>…) restent dans le fil du texte, sans casser la ligne.
Deux éléments n'ont aucun sens et servent uniquement de poignée pour le CSS ou JavaScript : <div>, conteneur de bloc, et <span>, conteneur en ligne.
<div class="carte-atelier">
<h3>Club lecture</h3>
<p>Tous les mercredis à <span class="horaire">14 h 30</span>.</p>
</div>
Ce comportement « bloc ou en ligne » est une valeur par défaut que le CSS peut changer (propriété display, chapitre 8). Ce qui ne change pas, ce sont les règles d'imbrication : un élément en ligne ne contient pas d'élément de bloc (pas de <div> dans un <span>), et un <p> ne contient ni titre, ni liste, ni autre <p>. Seule exception utile : un lien <a> peut entourer un bloc entier, par exemple toute une carte cliquable.
Exercices
Exercice 1 sur 4 Trouver les erreurs Réussi À revoir
Ce code contient sept erreurs. Trouve-les et corrige-les.
<html>
<head>
<title>Médiathèque</title>
</head>
<body>
<h1>Bienvenue</h1>
<h3>Nos horaires</h3>
<p>Ouvert le <strong>samedi</p></strong>
<ul>
Romans
<li>BD</li>
</ul>
<img src="logo.png">
</body>
</html>
Voir la réponseMasquer la réponse de l'exercice 1
- Il manque
<!DOCTYPE html>en première ligne : la page s'affiche en mode de compatibilité. - Il manque
lang="fr"sur<html>. - Il manque
<meta charset="utf-8">(et la baliseviewport) dans le<head>. - Le
<h3>suit directement le<h1>: saut de niveau, il faut un<h2>. <strong>et<p>se chevauchent : écris<p>Ouvert le <strong>samedi</strong></p>.- « Romans » est directement dans
<ul>: tout élément de liste va dans un<li>. - L'image n'a pas d'attribut
alt, ce que le validateur signale comme une erreur :<img src="logo.png" alt="Médiathèque des Tilleuls">(chapitre 3).
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Médiathèque</title>
</head>
<body>
<h1>Bienvenue</h1>
<h2>Nos horaires</h2>
<p>Ouvert le <strong>samedi</strong></p>
<ul>
<li>Romans</li>
<li>BD</li>
</ul>
<img src="logo.png" alt="Médiathèque des Tilleuls">
</body>
</html>
Tu avais trouvé ?
Exercice 2 sur 4 Parents, enfants, frères Réussi À revoir
Avec le code de la section l'arbre du document, réponds :
- Quel est le parent de
<strong>? - Quels sont les enfants de
<main>? - Quels sont les frères de
<p>? <li>est-il un descendant de<body>? un enfant de<body>?
Voir la réponseMasquer la réponse de l'exercice 2
<p>.<h2>,<p>et<ul>.<h2>et<ul>, les deux autres enfants de<main>.- Descendant, oui : il est contenu dans
<body>, à plusieurs niveaux de profondeur (body>main>ul>li). Enfant, non : un enfant est un descendant direct. Cette nuance compte en CSS :body livise les descendants,body > liuniquement les enfants directs.
Tu avais trouvé ?
Exercice 3 sur 4 La bonne balise de texte Réussi À revoir
Choisis la balise la plus juste pour chaque cas.
- « Fermeture exceptionnelle le 14 juillet », message important en haut de la page.
- Le titre d'un roman cité dans une phrase.
- Le nom de commande
ipconfigdans un tutoriel. - Les étapes pour réserver un ordinateur.
- Le sigle RGPD, avec sa signification au survol.
- Le prix « 5 € », qui ne doit pas être coupé en fin de ligne.
Voir la réponseMasquer la réponse de l'exercice 3
<strong>(importance), dans un paragraphe :<p><strong>Fermeture exceptionnelle le 14 juillet</strong></p>.<cite>, l'élément prévu pour le titre d'une œuvre (rendu en italique).<i>est acceptable ;<em>ne convient pas, ce n'est pas une emphase.<code>ipconfig</code>.- Une liste ordonnée
<ol>, avec un<li>par étape : l'ordre compte. <abbr title="Règlement général sur la protection des données">RGPD</abbr>.5 €: l'espace insécable empêche la coupure entre le nombre et le symbole.
Tu avais trouvé ?
Exercice 4 sur 4 Écrire une page complète Réussi À revoir
Écris la page horaires.html de la médiathèque, valide et complète : un titre d'onglet précis, un titre principal, une section « Horaires » avec la liste des jours d'ouverture (mardi à samedi), une section « Adresse » avec l'adresse sur trois lignes, et une phrase importante : « La médiathèque est fermée les jours fériés. »
Voir la réponseMasquer la réponse de l'exercice 4
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Horaires et adresse – Médiathèque des Tilleuls</title>
<meta name="description" content="Horaires d'ouverture et adresse de la médiathèque des Tilleuls, ouverte du mardi au samedi.">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Horaires et adresse</h1>
<h2>Horaires</h2>
<ul>
<li>Mardi : 14 h – 18 h</li>
<li>Mercredi : 10 h – 18 h</li>
<li>Jeudi : 14 h – 18 h</li>
<li>Vendredi : 14 h – 19 h</li>
<li>Samedi : 10 h – 17 h</li>
</ul>
<p><strong>La médiathèque est fermée les jours fériés.</strong></p>
<h2>Adresse</h2>
<p>Médiathèque des Tilleuls<br>
12 rue des Écoles<br>
01 23 45 67 89</p>
</body>
</html>
Les horaires peuvent aussi former un tableau (chapitre 3) ; une liste convient très bien pour cinq lignes. Ce qui compte : DOCTYPE, lang, charset, viewport, un <title> unique, un seul <h1>, des <h2> sans saut de niveau. L'adresse gagnerait à être dans un élément <address> (chapitre 4).
Tu avais trouvé ?