Regrouper le contenu et conclure la page
Objectif : Structurer les informations de l’atelier et les coordonnées de l’organisateur avec des éléments HTML adaptés et des titres hiérarchisés.
Une page peut contenir toutes les informations nécessaires sans rendre évidentes leurs relations. Une présentation mêlée aux modalités pratiques complique le repérage, tandis qu’un pied de page sans coordonnées laisse le visiteur sans point de contact. Vous allez organiser la page de réservation en distinguant la présentation, les informations pratiques et les renseignements sur l’organisateur.
La structure de l’en-tête, de la navigation et de la zone principale reprend les choix des leçons précédentes. Dans le main, une section sert à regrouper un ensemble cohérent de contenu autour d’un sujet ; ici, la présentation de l’atelier. À l’intérieur, un article convient aux informations qui forment un contenu autonome, comme la description et les détails pratiques de la séance.
Organiser les sujets et les titres
La section de présentation porte le titre principal déjà présent dans le projet : h1 « Réservez votre place à l’atelier ». L’article qui décrit la séance reçoit ensuite un titre de niveau inférieur, h2. Les sections d’inscription et de tarifs ont elles aussi leurs propres titres h2 ; ils sont au même niveau que celui de l’article parce qu’ils désignent des sujets principaux de la page, et non des subdivisions de cet article.
La hiérarchie des titres indique les niveaux de contenu : elle ne sert pas à choisir une taille visuelle. Gardez un seul h1 pour le titre principal, puis choisissez les niveaux suivants selon la relation entre les sujets. Dans cette page, un h2 pour « À propos de l’atelier » suffit ; n’ajoutez pas un niveau supplémentaire simplement pour obtenir une apparence particulière.
Terminer la page avec le pied de page
L’élément footer rassemble des informations complémentaires relatives au site ou au contenu concerné. Dans le projet, le pied de page du site peut rappeler le nom de l’organisateur et fournir un moyen de le contacter. Les coordonnées doivent correspondre à celles que vous souhaitez réellement publier : remplacez les exemples du code par les informations validées de l’organisateur avant la mise en ligne.
Voici la page complète à l’état de cette leçon. Elle conserve les champs et le tableau du squelette du projet ; les nouvelles informations de contact sont placées dans footer, sans ajouter de classe ni modifier les noms imposés par le contrat.
<!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>
</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>
<p>Organisateur : Atelier créatif</p>
<p>Adresse courriel : [email protected]</p>
<p>Téléphone : 01 23 45 67 89</p>
</footer>
</body>
</html>Le pied de page contient ici des renseignements relatifs à l’organisateur. Il n’est pas nécessaire d’ajouter un titre de page supplémentaire dans cette zone : les éléments de texte indiquent déjà le nom et les coordonnées. Vérifiez que ces données sont exactes et que les coordonnées restent lisibles lorsqu’elles sont consultées sur un petit écran.
À retenir
- Utilisez
sectionpour un regroupement cohérent autour d’un sujet. - Placez dans
articleun contenu autonome, tel que les informations pratiques de l’atelier. - Respectez les niveaux de titres : un seul
h1pour le titre principal, puis des titres adaptés aux sujets. - Utilisez
footerpour les informations complémentaires et les coordonnées de l’organisateur.
Dans la prochaine leçon, vous travaillerez les liens de navigation et leurs destinations afin de rendre les déplacements dans la page plus explicites.