Sauts de lignes HTML: aérez vos textes

Avatar de Benjamin Crozat.

Publié le par Benjamin Crozat

Temps de lecture estimé : 5 minutes

Rendez les textes de vos pages web HTML plus lisibles grâce aux sauts de ligne et retours à la ligne.

Les balises HTML à la rescousse

Prenons cette page HTML basique (que vous pouvez reproduire dans un fichier index.html par exemple) :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
 
<title>Bienvenu sur mon site !</title>
</head>
<body>
Bienvenu sur mon site !
 
Eiusmod qui eu ipsum nulla laborum cupidatat labore labore dolor.
 
Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat. Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.
</body>
</html>

Lorsque nous regardons le rendu dans notre navigateur, nous constatons une chose : c’était considérablement plus joli dans notre code !

Capture d’écran du texte sans formatage.

Et oui, cela ne fonctionnement pas du tout comme votre logiciel de traitement de texte, peu importe le nombre de sauts de ligne que vous y mettez ! Mais rassurez-vous, il est très simple d’y remédier à l’aide de quelques balises HTML bien pensées.

Les paragraphes avec <p>

La balise <p>, qui représente un paragraphe, est une balise de type block. Contrairement aux balises de type inline (comme <meta />), elle encapsule le texte ciblé. Techniquement, entre chaque paragraphe, une ligne sera sautée.

Mais un exemple vaut mieux que de longues explications :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
 
<title>Bienvenu sur mon site !</title>
</head>
<body>
<p>Bienvenu sur mon site !</p>
 
<p>Eiusmod qui eu ipsum nulla laborum cupidatat labore labore dolor.</p>
 
<p>Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat. Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.</p>
</body>
</html>

Et voici ce que cela donne dans notre navigateur :

Capture d’écran du texte formaté grâce à la balise <p>.

Voilà qui est mieux ! Nous avons un rendu plus fidèle à ce que nous avons imaginés. Vous maitrisez dorénavant le saut de ligne !

Les retours à la ligne avec <br />

Notre dernier paragraphe est un peu trop chargé. Il serait bien d’y ajouter au moins un retour à la ligne.

<p>Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat.
Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.</p>

Bien sûr, si nous tentons de faire un retour à la ligne “en dur” dans le code, cela ne marchera pas. C’est là que la balise <br />, de type inline, nous vient en aide.

<p>Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat.<br />
Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.</p>

Actualisez le rendu dans votre navigateur, puis constatez notre magnifique retour à la ligne :

Capture d’écran du texte contenant un retour à la ligne grâce à la balise <br />.

Il est même possible d’utiliser plusieurs balises <br /> à la suite afin de cumuler les retours à la ligne.

<p>Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat.<br /><br />
Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.</p>

Capture d’écran du texte cumulant les retours à la ligne.

Les séparateurs avec <hr />

Voici une petite balise bien sympathique permettant de créer des séparateurs. Il s’agit d’une simple ligne de couleur grise, affublée de marges en haut et en bas. Visuellement, cela s’apparente à un saut de ligne.

Ajoutons-la dans notre HTML et retournons voir le résultat dans notre navigateur web.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
 
<title>Bienvenu sur mon site !</title>
</head>
<body>
<p>Bienvenu sur mon site !</p>
 
<p>Eiusmod qui eu ipsum nulla laborum cupidatat labore labore dolor.</p>
 
<hr />
 
<p>Magna cillum nulla proident sint reprehenderit culpa dolor ex. Ut veniam culpa in id ipsum deserunt minim eu. Cillum occaecat aute officia dolore proident id excepteur laboris culpa sint mollit occaecat.<br />
Laboris commodo incididunt incididunt excepteur officia dolor consequat nisi. Duis exercitation aute elit incididunt Lorem incididunt ullamco do laborum magna.</p>
</body>
</html>

Capture d’écran du texte contenant une balise <hr />

Cet ajout est assez plaisant car il rend notre texte est moins fouillis.
Petite mise en garde cela dit : une balise <hr /> ne doit pas aller dans un paragraphe, ni dans une balise de type inline.

Ce HTML est invalide et votre navigateur tentera par lui-même de le corriger :

<p>
Eiusmod qui eu ipsum nulla laborum cupidatat labore labore dolor.
 
<hr />
 
Magna cillum nulla proident sint reprehenderit culpa dolor ex.
</p>

Conclusion

Vous êtes désormais capable de structurer votre texte grâce à l’aide de balises HTML simples, ce qui améliorera de manière non-négligeable le rendu du texte destiné à être lu par vos visiteurs.

Bien entendu, il est possible d’aller bien plus loin au niveau de la mise en page et je vous donne rendez-vous sur le prochain tutoriel de Larabiz ! 👋

0 commentaire

Besoin d'aide ? Envie de partager ?
Inscrivez-vous ou connectez-vous d'abord.

Ça vous a plu ?
Abonnez-vous à la newsletter !

Recevez régulièrement news, trucs et astuces à propos de Laravel et son ecosystème.

Autres articles à lire