Offrir une expérience de qualité à l’internaute qui visite votre site passe en premier lieu par le fait de structurer vos pages comme il faut. Les sauts de ligne ou de page jouent un rôle fondamental afin de bien organiser votre contenu.
Nous allons voir dans cet article comment faire un saut de page en HTML, ainsi que quelques techniques qui vous aideront à obtenir le meilleur rendu possible, à la fois pour la lecture sur écran et pour l’impression.
Table of Contents
Qu’Est-Ce Qu’un Saut de Page en HTML ?
En langage HTML, le saut de page ne s’apprécie pas de la même manière qu’un saut de page avec un traitement de texte comme Word par exemple. Il faut plutôt voir cela comme des sauts de ligne ou d’espacement entre les différentes sections du contenu.
Différents moyens peuvent être utilisés pour créer des « sauts de page », en mélangeant le HTML avec des règles en CSS. Cela va avoir pour conséquence de rendre la lecture du texte plus facile pour le visiteur.
Les Méthodes Classiques de Saut de Ligne en HTML
La balise <br>
est celle qui vient immédiatement à l’esprit quand on veut créer un saut de ligne. Elle ne fait que revenir à la ligne sans créer de nouveau paragraphe.
Voici un exemple de son utilisation :
<p>Voici un exemple de texte.<br>Et voici une nouvelle ligne après un saut.</p>
Attention toutefois à ne pas abuser de cette balise : elle peut entraîner une surcharge inutile du code de la page, surtout quand d’autres méthodes existent pour structurer un contenu.
Quand et Comment Utiliser la Balise<hr>
La balise <hr>
quant à elle permet de créer visuellement une séparation en ajoutant une ligne horizontale entre deux parties d’un texte.
Un exemple simple de son usage serait :
<p>Première section de texte.</p>
<hr>
<p>Nouvelle section après le séparateur.</p>
Ce qui visuellement donnera ceci :
Première section de texte.
Nouvelle section après le séparateur.
Cette ligne est particulièrement utile pour diviser des sections d’un article ou d’une page web, sans pour autant charger l’utilisateur d’un changement brutal de contexte.
Saut de Page Simulé avec CSS
Si vous désirez plutôt simuler un saut de page, préférez utiliser du CSS. Vous ajouterez ainsi un espace dans vos marges, ce qui créera des « sauts » tout aussi efficaces.
Par exemple, vous pouvez appliquer une marge à une section pour créer un espacement vertical :
<p style= »margin-bottom: 50px; »>Texte avec un grand espace en bas.</p>
Pour une approche plus propre et réutilisable, il est possible de définir une classe CSS dédiée, comme suit :
.saut-de-page {
margin-top: 100px;
}
Puis de l’utiliser dans le code HTML :
<p>Texte avant le saut de page.</p>
<div class= »saut-de-page »></div>
<p>Texte après le saut de page.</p>
Cette technique vous permet de garder un contrôle fin sur l’apparence de la page sans trop encombrer votre HTML.
Saut de Page avec CSS pour l’Impression (Break Page)
Dans le cas de la préparation d’une page pour l’impression, vous devez gérer la répartition des contenus sur les feuilles. Vous utiliserez donc les propriétés comme page-break-before
et page-break-after
qui vont forcer un saut de page au moment de l’impression.
@media print {
.saut-page {
page-break-before: always;
}
}
En appliquant cette classe à un élément, vous garantissez que lors de l’impression, une nouvelle page débutera juste avant cet élément.
Bonnes Pratiques et Pièges à Éviter
Les sauts de page c’est bien, en abuser ça craint 😉 Un contenu structuré correctement devra avant tout s’appuyer sur les balises de paragraphe <p>
ou <div>
pour créer différentes sections. Utiliser du CSS pour les marges et les espacement offre en effet beaucoup plus de flexibilité sans surcharger le code de la page.
Conclusion
Que ce soit avec HTML ou CSS, créer des sauts de ligne et de page est une question de précision et d’équilibre. Si la balise <br>
permet de résoudre rapidement des besoins simples, des techniques plus avancées comme les marges CSS ou les propriétés d’impression apportent un contrôle visuel plus abouti.
Prenez le temps de tester ces solutions dans vos projets pour trouver celle qui convient le mieux à vos besoins !