Présenter les horaires en listes
Objectif : Choisir une liste non ordonnée ou ordonnée pour afficher les horaires des concerts.
Les horaires d’un festival ne sont pas de simples lignes de texte : leur ordre peut aider le public à comprendre le déroulement des concerts. À l’inverse, une série d’informations pratiques n’a pas toujours de séquence à suivre. Vous allez choisir la structure de liste qui correspond au sens de chaque contenu, puis l’appliquer au programme du Festival des Rives.
Choisir le type de liste
Une liste non ordonnée, créée avec ul, regroupe des éléments sans indiquer qu’ils doivent être suivis dans un ordre précis. Une liste ordonnée, créée avec ol, indique au contraire que la position des éléments compte : l’ordre fait partie de l’information. Dans les deux cas, chaque élément de la liste est placé dans une balise li.
Pour choisir, demandez-vous si l’ordre des lignes change le sens ou l’utilité du contenu. Des étapes à réaliser successivement ou des concerts présentés dans leur déroulement chronologique justifient une liste ordonnée. Des éléments que vous pourriez permuter sans modifier leur sens — par exemple plusieurs moyens d’accès — conviennent à une liste non ordonnée.
Structurer les horaires du festival
Dans le programme du Festival des Rives, les concerts d’une même scène sont présentés dans l’ordre de leurs horaires. Une liste ordonnée rend cette succession explicite : le concert de 18 h précède celui de 20 h sur la Scène de la Rivière, et celui de 19 h précède celui de 21 h sur la Scène du Jardin. Chaque scène possède sa propre liste, car le déroulement est à lire séparément pour chacune d’elles.
Les informations d’accès, elles, restent dans une liste non ordonnée : l’adresse, la gratuité et le stationnement vélo sont des renseignements indépendants. La page ci-dessous reprend l’état complet du projet et applique ce choix aux listes. Les autres éléments sont conservés ; les liens et l’image figurent dans la page, mais leur fonctionnement et leur rédaction seront étudiés dans les leçons dédiées.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Festival des Rives — Programme</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="festival-page">
<header class="festival-page__entete">
<h1>Festival des Rives</h1>
<p>Deux jours de musique au cœur de la ville.</p>
<nav class="festival-page__navigation" aria-label="Navigation principale">
<ul>
<li><a class="festival-page__lien" href="#presentation">Présentation</a></li>
<li><a class="festival-page__lien" href="#programme">Programme</a></li>
<li><a class="festival-page__lien" href="#acces">Accès</a></li>
</ul>
</nav>
</header>
<main class="festival-page__contenu">
<section class="festival-page__presentation" id="presentation">
<h2>Un festival local et convivial</h2>
<p>Retrouvez des artistes de la région et des découvertes musicales dans le parc des Rives.</p>
<img class="festival-page__image" src="assets/festival-scene.jpg" alt="La scène principale installée dans le parc, devant un public réuni en soirée">
<p>Pour découvrir les initiatives de la ville, consultez le <a class="festival-page__lien" href="https://www.example.org/">site de la mairie</a>.</p>
</section>
<section class="festival-page__programme" id="programme">
<h2>Programme des concerts</h2>
<section class="festival-page__scene" aria-labelledby="scene-riviere">
<h3 id="scene-riviere">Scène de la Rivière — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T18:00">18 h</time> — Les Lucioles</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T20:00">20 h</time> — Rivage Sonore</li>
</ol>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ol>
<li class="festival-page__horaire"><time datetime="2025-06-14T19:00">19 h</time> — Trio des Pins</li>
<li class="festival-page__horaire"><time datetime="2025-06-14T21:00">21 h</time> — Les Échos</li>
</ol>
</section>
</section>
<section class="festival-page__acces" id="acces">
<h2>Préparer votre venue</h2>
<p>Le festival se déroule au parc des Rives, accessible à pied depuis la gare centrale.</p>
<ul>
<li>Adresse : 12, avenue du Parc, 00000 Ville-sur-Rive.</li>
<li>Entrée gratuite dans la limite des places disponibles.</li>
<li>Un stationnement vélo est disponible près de l'entrée.</li>
</ul>
<p><a class="festival-page__lien" href="#presentation">Retour à la présentation</a></p>
</section>
</main>
<footer class="festival-page__pied">
<p>Festival des Rives — informations susceptibles d'être mises à jour.</p>
</footer>
</body>
</html>Enregistrez cette version dans index.html, puis ouvrez-la dans votre navigateur comme dans la leçon consacrée à l’ouverture locale. Vous obtenez les concerts regroupés par scène et présentés chronologiquement ; le navigateur affiche les éléments de chaque liste selon sa présentation par défaut. Les informations d’accès restent regroupées séparément, sans leur attribuer une succession à suivre.
À retenir
ulregroupe des éléments dont l’ordre n’est pas significatif.olsignale une succession dont l’ordre compte.- Placez chaque élément de liste dans un
li. - Utilisez une liste ordonnée pour les concerts présentés chronologiquement et une liste non ordonnée pour les informations d’accès indépendantes.