Structurer les informations de l’atelier

Une page de réservation peut contenir toutes les informations nécessaires et rester difficile à consulter si le programme, les horaires et les conditions sont mélangés. Vous allez rendre ces informations repérables en les séparant par sujet et en choisissant une présentation adaptée à leur contenu.

Dans la leçon « Regrouper le contenu et conclure la page », vous avez déjà placé les informations pratiques dans l’article atelier-article. Vous allez maintenant organiser cet article avec des paragraphes pour les explications et des listes pour les éléments qui se répètent ou suivent un ordre.

Séparer les informations par sujet

Un paragraphe p convient à une explication ou à une information formulée en phrases. Pour aider les personnes qui préparent leur réservation, donnez à chaque sujet un titre distinct, puis présentez dessous uniquement les renseignements qui lui appartiennent. Le programme décrit ce qui sera réalisé, les horaires indiquent quand participer et les conditions précisent les règles à connaître avant de réserver.

Le contrat du projet ne prévoit pas de nouvelles classes pour ces sous-parties. Utilisez donc des titres et des éléments HTML adaptés sans ajouter de classe : l’article conserve atelier-article, et son contenu devient plus facile à parcourir grâce à son organisation interne.

Choisir le type de liste

Une liste non ordonnée, écrite avec ul, convient lorsque l’ordre des éléments n’a pas d’importance : par exemple, les étapes d’un programme présentées comme des activités possibles. Une liste ordonnée, écrite avec ol, est adaptée à une suite dans laquelle l’ordre compte, comme une procédure de réservation. Chaque élément de liste est contenu dans une balise li.

Voici un exemple complet de l’article après réorganisation. Il conserve le texte déjà présent, puis précise un programme, des horaires indicatifs et des conditions simples ; adaptez ces informations si les modalités réelles de l’atelier diffèrent.

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

    <h3>Programme</h3>
    <ul>
        <li>Découvrir les matériaux et préparer le matériel.</li>
        <li>Réaliser une création avec l’accompagnement de l’animateur.</li>
        <li>Terminer et emporter votre réalisation.</li>
    </ul>

    <h3>Horaires</h3>
    <p>Les séances ont lieu le samedi, de 10 h à 12 h. Choisissez la date souhaitée dans le formulaire d’inscription.</p>

    <h3>Conditions de réservation</h3>
    <ol>
        <li>Indiquez vos coordonnées et le nombre de participants.</li>
        <li>Choisissez une formule et une date de séance.</li>
        <li>Envoyez votre demande de réservation.</li>
    </ol>
    <p>La réservation est soumise à la disponibilité des places. Vérifiez les informations saisies avant d’envoyer votre demande.</p>
</article>

Les titres h3 distinguent ici les sujets à l’intérieur de l’article, dont le titre est un h2. Cette organisation respecte la hiérarchie des titres présentée dans la leçon « Regrouper le contenu et conclure la page » : elle ne crée pas un nouveau titre principal.

À retenir

• Séparez le programme, les horaires et les conditions pour que chaque sujet soit identifiable.
• Utilisez un paragraphe pour expliquer une information en phrases.
• Choisissez une liste non ordonnée si l’ordre des éléments est libre.
• Choisissez une liste ordonnée si les éléments décrivent des étapes à suivre.
• Conservez les classes autorisées et la structure du projet.