Les paragraphes et le formatage de texte
Les paragraphes et le formatage de texte
- 1La balise <p> structure le contenu en paragraphes distincts pour une lecture organisée
- 2Les balises <strong> et <em> donnent du sens sémantique à l'emphase et à l'importance
- 3La balise <br> permet des retours à la ligne sans créer de nouveaux paragraphes
Introduction
Dans toute communication écrite, l'organisation du texte est essentielle pour transmettre efficacement votre message. En HTML, vous disposez d'outils spécifiques pour structurer et mettre en forme votre contenu textuel de manière sémantique et accessible.
Les paragraphes avec la balise <p>
Définition et rôle
La balise <p> (paragraphe) est l'élément fondamental pour organiser le texte en unités de sens cohérentes. Chaque paragraphe représente une idée ou un groupe d'idées liées.
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Exemple de paragraphes</title>
6</head>
7<body>
8 <p>Ceci est mon premier paragraphe. Il contient une idée principale
9 que je développe avec plusieurs phrases explicatives.</p>
10
11 <p>Voici un second paragraphe qui traite d'une nouvelle idée.
12 La transition entre les paragraphes est automatiquement gérée
13 par le navigateur.</p>
14
15 <p>Un troisième paragraphe pour conclure ma démonstration.</p>
16</body>
17</html>Comportement visuel
💡 À retenir: Les navigateurs ajoutent automatiquement un espacement vertical entre les paragraphes, créant une séparation visuelle naturelle.
La balise <br> pour les retours à la ligne
Utilisation appropriée
La balise <br> (break) force un retour à la ligne sans créer un nouveau paragraphe. Elle est auto-fermante et doit être utilisée avec parcimonie.
1<p>Première ligne de mon paragraphe<br>
2Seconde ligne dans le même paragraphe<br>
3Troisième ligne, toujours dans le même paragraphe</p>
4
5<p>Ceci est un nouveau paragraphe, distinct du précédent.</p>Cas d'usage légitimes
| Situation | Exemple d'usage | Recommandation |
|---|---|---|
| Adresse postale | 123 rue de la Paix<br>75001 Paris | ✅ Approprié |
| Poésie | Vers 1<br>Vers 2<br>Vers 3 | ✅ Approprié |
| Espacement général | Texte<br><br>Autre texte | ❌ Utiliser <p> |
⚠️ Attention: N'utilisez jamais plusieurs
<br>consécutives pour créer de l'espacement. Utilisez plutôt le CSS ou des paragraphes séparés.
Le formatage sémantique du texte
La balise <strong> pour l'importance
La balise <strong> indique qu'un contenu a une importance particulière. Les navigateurs l'affichent généralement en gras.
1<p>Il est <strong>absolument essentiel</strong> de sauvegarder vos données
2avant de procéder à cette opération.</p>
3
4<p>Les <strong>trois règles d'or</strong> à retenir sont simples mais cruciales.</p>La balise <em> pour l'emphase
La balise <em> (emphasis) marque un contenu qui doit être prononcé avec emphase. Elle apparaît généralement en italique.
1<p>Vous devez <em>vraiment</em> faire attention à ce détail important.</p>
2
3<p>Ce n'est pas <em>seulement</em> une question de style, c'est une
4question de <strong>sémantique</strong>.</p>Comparaison sémantique vs visuel
🎯 En pratique: Privilégiez toujours
<strong>et<em>plutôt que<b>et<i>pour donner du sens à votre contenu, pas seulement un aspect visuel.
Le saviez-vous ?
Les lecteurs d'écran pour personnes malvoyantes prononcent différemment les textes marqués avec <strong> et <em>, mais ignorent complètement <b> et <i>
— Standards d'accessibilité web WCAG 2.1
Exemple complet et bonnes pratiques
Voici un exemple qui combine tous ces éléments :
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <title>Article bien structuré</title>
6</head>
7<body>
8 <h1>Les bases du jardinage urbain</h1>
9
10 <p>Le jardinage urbain connaît un <strong>essor remarquable</strong>
11 ces dernières années. Cette pratique permet aux citadins de
12 reconnecter avec la nature.</p>
13
14 <p>Pour débuter, vous aurez besoin de :</p>
15
16 <p><strong>Matériel de base :</strong><br>
17 • Pots et jardinières<br>
18 • Terreau de qualité<br>
19 • Outils de jardinage miniatures</p>
20
21 <p>Il est <em>particulièrement important</em> de choisir des plantes
22 adaptées à votre environnement. Les <strong>plantes aromatiques</strong>
23 comme le basilic ou la menthe sont idéales pour commencer.</p>
24
25 <p>N'oubliez pas : le succès vient avec la <em>patience</em> et
26 la <strong>régularité</strong> des soins.</p>
27</body>
28</html>Points clés à retenir
💡 À retenir: Chaque balise HTML a un rôle sémantique précis. Utilisez
<p>pour les paragraphes,<strong>pour l'importance, et<em>pour l'emphase.
⚠️ Attention: La balise
<br>ne doit pas être utilisée pour créer de l'espacement entre les éléments. C'est le rôle du CSS.
🎯 En pratique: Un contenu bien structuré sémantiquement sera mieux référencé par Google et plus accessible aux personnes utilisant des technologies d'assistance.