Saut de ligne HTML : aérez vos textes
Publié le par Benjamin Crozat
Temps de lecture estimé : 4 minutes
Afin de créer un saut de ligne en HTML, utilisez la balise <br />.
Mais attention, il ne s’agit pas de la manière optimale de faire dans tous les cas de figure. Passons-les toutes en revue.
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 :
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>
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 :
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 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>
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 capables 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.
0 commentaire
Inscrivez-vous ou connectez-vous d'abord.