Rédiger des liens utiles dans la navigation
Objectif : Rédiger des liens de navigation dont le texte indique clairement la destination et vérifier leurs fragments de destination.
Un lien de navigation peut être présent et pourtant rester difficile à utiliser si son intitulé ne permet pas de comprendre où il mène. Dans la page de réservation, vous voulez accéder rapidement à la présentation de l’atelier, au formulaire ou aux tarifs, sans devoir deviner la destination de chaque lien.
Dans cette leçon, vous allez vérifier les liens déjà prévus dans la navigation du projet. Vous allez notamment faire correspondre le texte visible de chaque lien à sa destination dans la page, afin que la navigation soit compréhensible et fonctionnelle.
Un lien doit annoncer sa destination
L’élément a crée un lien. Son attribut href indique la destination ; le texte placé entre les balises donne son intitulé visible. Choisissez un texte qui nomme cette destination, plutôt qu’une formule vague comme « Cliquez ici » : un lecteur doit pouvoir comprendre le lien à partir de son intitulé.
Le squelette du projet contient trois liens internes. Le symbole # dans l’attribut href indique que la destination se trouve dans le même document ; le nom qui suit doit correspondre à l’attribut id d’un élément de la page. Par exemple, href="#inscription" doit mener à un élément portant id="inscription".
Vérifier les trois destinations du projet
La navigation propose « Présentation », « Inscription » et « Tarifs ». Ces textes sont courts, mais nomment les trois zones auxquelles ils conduisent. Pour contrôler chaque lien, comparez la valeur de son href avec l’identifiant de la section correspondante ; ne vous contentez pas de vérifier que le lien est souligné ou qu’il change d’apparence au survol.
Voici le fichier index.html complet à l’état actuel du projet. Les éléments sémantiques et les classes restent ceux du contrat ; cette vérification porte sur les intitulés de navigation et sur la correspondance entre les fragments et les identifiants.
<!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>Dans le navigateur, sélectionnez chaque entrée de navigation. « Présentation » doit amener à la section qui contient le titre principal, « Inscription » au formulaire et « Tarifs » au tableau. Le défilement vers une zone précise confirme que le fragment trouve bien son identifiant ; si rien ne se passe, vérifiez les deux valeurs caractère par caractère, notamment les accents éventuels et les différences de casse.
Éviter les intitulés ambigus
Un intitulé comme « En savoir plus » n’indique pas, à lui seul, ce que le lecteur trouvera. Dans une navigation, préférez le nom de la zone ou du sujet visé ; conservez des libellés cohérents avec les titres présents dans la page. Ici, « Tarifs » est plus utile que « Voir » parce qu’il annonce directement le contenu atteint.
N’ajoutez pas de lien si la destination n’existe pas ou si vous ne pouvez pas décrire ce qu’elle contient. Un texte de lien clair ne compense pas un attribut href erroné. À l’inverse, un fragment correct ne rend pas un intitulé vague plus informatif : contrôlez toujours ces deux aspects séparément.
À retenir
- L’élément
acrée un lien et son attributhrefdésigne sa destination. - Un intitulé de lien doit permettre de comprendre où il mène, sans dépendre d’une formule vague.
- Pour un lien interne, la valeur après
#doit correspondre à l’idde la zone visée. - Testez chaque lien dans le navigateur et contrôlez séparément son texte visible et sa destination.
Dans la prochaine leçon, vous organiserez les informations de l’atelier en fonction de leur sujet.