Délimiter le contenu principal
Objectif : Organiser le contenu central de la page dans une zone main unique.
Une page peut afficher plusieurs zones utiles, mais son contenu central doit être identifiable sans ambiguïté. Si cette zone n’est pas délimitée, les technologies d’assistance et les outils d’analyse doivent parcourir davantage d’éléments pour atteindre le sujet principal. Vous allez placer le contenu de la réservation dans un élément main et vérifier qu’il n’existe qu’une seule zone de ce type.
Identifier la zone principale
L’élément main désigne le contenu dominant, propre à la page. Dans votre projet, il regroupe la présentation de l’atelier, les informations d’inscription et les tarifs : ce sont les informations centrales pour une personne qui souhaite réserver. L’en-tête et le pied de page restent hors de cette zone, car ils servent respectivement à présenter le site et à conclure la page.
Une page ne doit comporter qu’un seul élément main visible. Cette règle fournit un repère net : la navigation du site mène à des parties de la page, tandis que main encadre le contenu qui répond à la demande de l’utilisateur. Ne placez donc pas un main autour de chaque sujet et n’en imbriquez pas un second dans le premier.
Donner un titre principal à la page
Le titre principal indique le sujet de la page. Ici, « Réservez votre place à l’atelier » décrit directement l’action et le contenu proposés. Utilisez un seul h1 pour ce titre ; les autres titres du document ne remplacent pas ce repère principal. La hiérarchie détaillée des titres sera abordée dans une leçon ultérieure.
Le titre est placé dans le contenu principal, au début de la présentation de l’atelier. Son attribut id permet à la section qui le contient de le désigner avec aria-labelledby. Vous conservez ainsi le squelette du projet et ses identifiants ; cette leçon ne modifie ni les destinations de navigation ni le contenu des autres parties.
Lire et vérifier le document complet
Voici l’état complet de index.html après cette étape. L’élément main entoure les contenus propres à la réservation et le document comporte un seul h1. Les zones et les contrôles déjà présents sont conservés tels quels : vous vous concentrez ici sur la limite du contenu principal, sans anticiper l’étude détaillée de leur structure.
<!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>
</footer>
</body>
</html>La feuille de style du projet doit également contenir une règle pour chaque classe employée dans le document. Voici un fichier style.css complet qui conserve les variables autorisées et ajoute les règles manquantes pour les champs, le bouton, la zone de tarifs, le tableau et le pied de page. Les règles de présentation ne changent pas la fonction de main : son rôle est défini par le HTML.
:root {
--atelier-couleur-texte: #24313a;
--atelier-couleur-fond: #ffffff;
--atelier-couleur-accent: #145c52;
--atelier-espace-petit: 0.5rem;
--atelier-espace-standard: 1.5rem;
--atelier-rayon: 0.5rem;
--atelier-police: Arial, sans-serif;
--atelier-taille-texte: 1rem;
}
.atelier-page {
color: var(--atelier-couleur-texte);
background-color: var(--atelier-couleur-fond);
font-family: var(--atelier-police);
font-size: var(--atelier-taille-texte);
}
.atelier-entete,
.atelier-principal,
.atelier-pied {
padding: var(--atelier-espace-standard);
}
.atelier-navigation ul {
display: flex;
gap: var(--atelier-espace-standard);
padding: 0;
list-style: none;
}
.atelier-presentation,
.atelier-inscription,
.atelier-tarifs,
.atelier-article {
margin-block-end: var(--atelier-espace-standard);
}
.atelier-formulaire {
display: grid;
gap: var(--atelier-espace-standard);
}
.atelier-champ {
display: grid;
gap: var(--atelier-espace-petit);
}
.atelier-champ input,
.atelier-champ select {
padding: var(--atelier-espace-petit);
border: 1px solid var(--atelier-couleur-texte);
border-radius: var(--atelier-rayon);
font: inherit;
}
.atelier-bouton {
padding: var(--atelier-espace-petit) var(--atelier-espace-standard);
color: var(--atelier-couleur-fond);
background-color: var(--atelier-couleur-accent);
border: 0;
border-radius: var(--atelier-rayon);
font: inherit;
}
.atelier-tableau {
border-collapse: collapse;
}
.atelier-tableau th,
.atelier-tableau td {
padding: var(--atelier-espace-petit);
border: 1px solid var(--atelier-couleur-texte);
text-align: left;
}
.atelier-pied {
color: var(--atelier-couleur-fond);
background-color: var(--atelier-couleur-accent);
}Aperçu appliqué au document HTML de cette leçon : la règle CSS est injectée dans la page pour voir son effet réel.
Pour contrôler le résultat, recherchez <main dans le fichier : il doit apparaître une fois et sa balise de fermeture doit se trouver après les contenus centraux, avant le pied de page. Recherchez ensuite <h1 : le titre principal ne doit apparaître qu’une fois. Enfin, vérifiez que la classe atelier-principal figure sur cet élément, conformément au contrat du projet.
À retenir
- Utilisez un seul élément
mainpour encadrer le contenu central propre à la page. - Laissez l’en-tête et le pied de page hors de cette zone principale.
- Placez un seul
h1dans la page pour annoncer son sujet principal. - Conservez la classe
atelier-principalsurmainet contrôlez les ouvertures et fermetures de la zone.
Dans la prochaine leçon, vous apprendrez à distinguer les différents regroupements de contenu situés à l’intérieur de cette zone principale.