Rédiger les informations en paragraphes
Objectif : Placer la présentation du festival et les détails pratiques dans des paragraphes distincts.
Une page peut contenir les bons titres sans expliquer clairement ce que le visiteur doit savoir. Si la présentation, les consignes et les détails pratiques sont entassés dans un seul bloc, les informations deviennent difficiles à parcourir. Vous allez séparer ces idées en paragraphes pour rendre le programme plus lisible.
Un paragraphe par idée
L’élément p marque un paragraphe de texte. Il convient au texte courant : une présentation, une consigne ou une précision qui développe une idée. Le navigateur place normalement un espace avant et après chaque paragraphe, ce qui distingue visuellement les blocs sans que vous ayez à ajouter des lignes vides dans le code.
Dans la page du festival, la présentation générale peut tenir dans un paragraphe : elle annonce le lieu, l’ambiance et la programmation régionale. Les informations d’accès demandent un autre paragraphe, car elles répondent à une question différente : où se rendre et comment rejoindre le site. Cette séparation aide les visiteurs à repérer rapidement l’information recherchée.
Séparer les informations du festival
Le document ci-dessous reprend le programme du projet fil rouge et rend visibles les paragraphes de présentation et d’accès. Les titres hiérarchisés ont été traités dans la leçon précédente. Les listes, les liens et l’image figurent ici dans l’état fourni du projet ; leur fonctionnement sera étudié dans les leçons prévues pour ces notions. Pour cette leçon, observez surtout la place et le contenu des éléments p.
<!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>
<ul>
<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>
</ul>
</section>
<section class="festival-page__scene" aria-labelledby="scene-jardin">
<h3 id="scene-jardin">Scène du Jardin — samedi</h3>
<ul>
<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>
</ul>
</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>Dans cet exemple, le paragraphe sous le titre principal présente la durée de l’événement en une phrase. Dans la section de présentation, le premier paragraphe décrit le festival ; le suivant ajoute une information sur les initiatives de la ville. Ces blocs sont distincts parce qu’ils n’ont pas exactement le même rôle, même s’ils se trouvent dans la même section.
Dans la section d’accès, le paragraphe situe le festival et indique un repère de trajet. Les points d’adresse et de services restent des informations distinctes, présentées séparément dans le document. Le dernier paragraphe de cette section contient un lien de retour : le texte autour du lien reste du texte courant, tandis que l’élément de lien sert à naviguer. Les liens seront expliqués dans les prochaines leçons.
Vérifier le résultat
Enregistrez les modifications dans index.html, puis actualisez la page déjà ouverte dans le navigateur. Vérifiez que la courte phrase d’introduction, la présentation et les informations sur l’accès apparaissent en blocs séparés. Si deux idées différentes restent dans un même paragraphe, placez-les dans des éléments p distincts ; si une phrase est coupée en deux seulement pour créer un espace, conservez-la dans le même paragraphe.
À retenir
- L’élément
pdélimite un paragraphe de texte courant. - Séparez les idées distinctes en paragraphes distincts.
- Placez chaque paragraphe à l’endroit où il complète l’information de sa section.
- Ne détournez pas un paragraphe pour simuler un titre ou une liste.