Organiser les scènes et les horaires

Un programme qui rassemble tous les concerts dans une seule liste devient difficile à parcourir : les visiteurs ne repèrent pas rapidement les artistes d’une scène ni l’ordre des passages. Vous allez répartir les concerts entre les scènes de la Rivière et du Jardin, puis rendre leurs horaires lisibles et cohérents.

La page complète et ses titres hiérarchisés sont déjà en place, comme dans « Construire la présentation générale ». Vous conservez son en-tête, sa présentation, son accès et son pied de page : le travail porte ici sur le contenu de la section Programme des concerts.

Répartir les concerts par scène

Chaque scène forme une sous-section du programme. L’élément section regroupe les concerts qui partagent cette scène ; son titre h3 précise le nom de la scène et le jour. Le titre de section reprend ainsi le niveau inférieur au titre « Programme des concerts », qui reste un h2.

Dans le projet, chaque section de scène porte la classe autorisée festival-page__scene. L’attribut aria-labelledby relie cette section à l’identifiant unique du titre qu’elle contient : les technologies d’assistance peuvent ainsi annoncer clairement le nom de la section.

Ordonner les horaires

Pour une scène, l’ordre des concerts a une signification : il indique à quel moment les artistes jouent. Une liste ol exprime cet ordre ; chaque concert reste un élément li et reçoit la classe prévue festival-page__horaire. Placez les concerts du plus tôt au plus tard, sans mélanger les horaires des scènes différentes.

L’élément time entoure l’horaire affiché et son attribut datetime fournit une valeur normalisée exploitable par un logiciel. Par exemple, 2025-06-14T18:00 représente le 14 juin 2025 à 18 heures ; la valeur lisible « 18 h » reste destinée aux visiteurs. L’ordre des lignes est important : une valeur datetime ne trie pas automatiquement la liste.

Programme des concerts : HTML complet

Remplacez dans index.html l’ancienne section du programme par le bloc ci-dessous. Le reste de la page ne change pas ; conservez notamment l’identifiant programme, car le lien de navigation existant pointe vers cette destination.

<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>

Les horaires sont chronologiques à l’intérieur de chaque scène : 18 h précède 20 h sur la scène de la Rivière, et 19 h précède 21 h sur celle du Jardin. Les heures peuvent se chevaucher entre scènes sans que le programme soit incohérent : les visiteurs choisissent alors entre deux concerts simultanés.

À retenir

• Créez une section distincte pour chaque scène afin que les concerts soient regroupés par lieu.
• Gardez un titre h3 pour chaque scène, sous le titre h2 du programme, et associez-le à sa section avec aria-labelledby.
• Utilisez une liste ordonnée quand la succession des concerts compte, en respectant l’ordre chronologique.
• Fournissez à time une valeur datetime normalisée et conservez un horaire lisible entre ses balises.

Dans la prochaine leçon, vous contrôlerez les liens et le rendu du programme dans le navigateur.