Vérifier la structure du document
Objectif : Repérer et corriger les erreurs de hiérarchie et de fermeture dans le balisage de la page de réservation.
Une balise mal fermée peut déplacer une partie de la page dans le mauvais conteneur ou rendre son affichage imprévisible. Avant d’ajouter les tarifs ou d’affiner le formulaire, vérifiez que le document actuel forme un arbre HTML cohérent et que ses liens internes pointent vers des zones existantes.
Contrôler l’imbrication et les fermetures
Les éléments HTML s’ouvrent et se ferment selon une structure emboîtée : le dernier élément ouvert doit être le premier fermé. Par exemple, si un paragraphe commence à l’intérieur d’un article, fermez le paragraphe avant l’article. Une fermeture manquante peut conduire le navigateur à réparer le document automatiquement ; le résultat affiché ne garantit donc pas que le code source soit correct.
Pour relire le fichier, partez de l’indentation à quatre espaces prévue par le projet. Chaque niveau intérieur doit être indenté par rapport à son parent ; les fermetures doivent revenir au niveau de l’ouverture correspondante. Vérifiez en particulier les éléments qui se répètent dans la page : une section contient son titre et son contenu, tandis que chaque élément enfant se ferme avant cette section.
Vérifier les niveaux de contenu et les destinations
Comparez ensuite les ouvertures et les fermetures des grandes zones : le pied de page ne doit pas se retrouver à l’intérieur du contenu principal, et le formulaire doit rester dans sa section d’inscription. La structure ci-dessous reprend l’état du projet : elle conserve les classes autorisées, les liens de navigation et l’article enrichi par les leçons précédentes. Remplacez l’adresse d’exemple du lien contextuel par celle de la formation réelle avant publication.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation de l’atelier</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="atelier-page">
<header class="atelier-entete">
<p>Atelier créatif</p>
<nav class="atelier-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#presentation">Présentation</a></li>
<li><a href="#inscription">Inscription</a></li>
<li><a href="#tarifs">Tarifs</a></li>
</ul>
</nav>
</header>
<main class="atelier-principal">
<section class="atelier-presentation" id="presentation" aria-labelledby="titre-atelier">
<h1 id="titre-atelier">Réservez votre place à l’atelier</h1>
<article class="atelier-article">
<h2>À propos de l’atelier</h2>
<p>Participez à une séance guidée et repartez avec votre création.</p>
<p>Durée : deux heures. Les places sont limitées.</p>
<h3>Au programme</h3>
<ul>
<li>Découverte du matériel</li>
<li>Réalisation d’une création guidée</li>
<li>Présentation des réalisations</li>
</ul>
<h3>Horaires et réservation</h3>
<p>Les séances ont lieu le samedi, sur réservation.</p>
<ol>
<li>Choisissez une date et une formule.</li>
<li>Indiquez vos coordonnées et le nombre de participants.</li>
<li>Envoyez votre réservation.</li>
</ol>
<p>Pour approfondir votre pratique, consultez la <a href="https://example.org/formation-complementaire">formation complémentaire en création</a>.</p>
</article>
</section>
<section class="atelier-inscription" id="inscription" aria-labelledby="titre-inscription">
<h2 id="titre-inscription">Formulaire d’inscription</h2>
<form class="atelier-formulaire" action="#" method="post">
<div class="atelier-champ">
<label for="nom">Nom complet</label>
<input id="nom" name="nom" type="text" autocomplete="name" minlength="2" required>
</div>
<div class="atelier-champ">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
</div>
<div class="atelier-champ">
<label for="telephone">Téléphone</label>
<input id="telephone" name="telephone" type="tel" autocomplete="tel" pattern="[0-9 +()-]{8,20}" required>
</div>
<div class="atelier-champ">
<label for="date">Date souhaitée</label>
<input id="date" name="date" type="date" required>
</div>
<div class="atelier-champ">
<label for="participants">Nombre de participants</label>
<input id="participants" name="participants" type="number" min="1" max="8" value="1" required>
</div>
<div class="atelier-champ">
<label for="formule">Formule</label>
<select id="formule" name="formule" required>
<option value="">Choisissez une formule</option>
<option value="decouverte">Découverte</option>
<option value="complete">Complète</option>
</select>
</div>
<button class="atelier-bouton" type="submit">Envoyer la réservation</button>
</form>
</section>
<section class="atelier-tarifs" id="tarifs" aria-labelledby="titre-tarifs">
<h2 id="titre-tarifs">Tarifs des formules</h2>
<table class="atelier-tableau">
<caption>Tarifs par participant, en euros</caption>
<thead>
<tr>
<th scope="col">Formule</th>
<th scope="col">Durée</th>
<th scope="col">Tarif</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Découverte</th>
<td>Deux heures</td>
<td>35 €</td>
</tr>
<tr>
<th scope="row">Complète</th>
<td>Trois heures</td>
<td>50 €</td>
</tr>
</tbody>
</table>
</section>
</main>
<footer class="atelier-pied">
<p>Atelier créatif — Informations et réservations</p>
</footer>
</body>
</html>Dans ce fichier, contrôlez notamment que chaque li est à l’intérieur d’une liste, que les éléments du formulaire restent dans form et que les sections se ferment avant main. L’imbrication visible dans le code est un repère rapide, mais elle ne détecte pas toutes les erreurs : un validateur signale aussi des balises mal placées, des identifiants dupliqués ou des références introuvables.
Valider le document et corriger les erreurs
Copiez le contenu complet de index.html dans un validateur HTML, ou indiquez l’adresse de la page une fois publiée. Lisez les messages dans l’ordre : corrigez la première erreur, relancez la validation, puis traitez les suivantes. Une balise oubliée peut provoquer plusieurs signalements en cascade ; corriger d’abord l’erreur à sa source évite de masquer le problème sous des changements inutiles.
Après la validation, faites une revue ciblée. Vérifiez qu’il n’y a qu’un seul h1, que les titres secondaires correspondent à leur contenu et qu’aucun niveau n’est choisi uniquement pour obtenir une taille visuelle particulière. Vérifiez également que les fragments utilisés dans les liens de navigation correspondent exactement aux valeurs des attributs id présents sur les sections. La structure sémantique et les rôles des éléments ont été présentés dans les leçons précédentes ; ici, vous contrôlez leur emboîtement et leurs références.
À retenir
- Fermez les éléments dans l’ordre inverse de leur ouverture et contrôlez l’indentation à quatre espaces.
- Vérifiez que chaque contenu reste à l’intérieur de son conteneur prévu et que les titres reflètent les niveaux du document.
- Contrôlez les identifiants et les destinations des liens internes.
- Passez le document dans un validateur HTML, corrigez les erreurs signalées et relancez le contrôle.
Dans la prochaine leçon, vous déterminerez quand présenter des informations sous forme de tableau plutôt que sous forme de texte ou de liste.