Comment sauter une ligne ou aller à la ligne en HTML ?
Quelles sont les bonnes pratiques pour sauter une ligne en HTML, ou aller à la ligne en HTML ?
Que vous vouliez passer à la ligne, ou bien sauter une ligne, en HTML, la méthode diffère selon les types de contenus entre lesquels vous voulez effectuer l'espacement, ou le retour à la ligne.
Pour sauter une ligne ou aller à la ligne en HTML, procédez comme suit :
- Utilisez la balise
<BR>
lorsque le contenu est textuel. - Utilisez la propriété CSS
margin
lorsque le contenu est du type Bloc HTML.
Exemple de saut de ligne HTML avec la balise <BR>
:
<p>
Une première ligne de texte au sein d'un paragraphe.
<br>
Une seconde ligne de texte au sein d'un même paragraphe.
</p>
Exemple de saut de ligne HTML avec la propriété margin
CSS :
<div style="margin: 0 0 10px 0;">Un bloc HTML avec du contenu</div>
<div>Un autre bloc HTML avec du contenu</div>
Dans ce dernier exemple, on crée un espacement en bas du premier bloc, de 10 pixels, entre les deux blocs HTML <div>
, via la propriété CSS margin.
Deux autres solutions possibles pour aller à la ligne en HTML sont l'utilisation des propriétés CSS white-space: pre;
et display: block;
.
Exemple avec white-space: pre;
:
<div style="white-space: pre">
Ligne 1
Ligne 2
</div>
Exemple avec display: block;
:
<style>
p span {
display: block;
}
</style>
<p>
<span>Ligne 1</span>
<span>Ligne 2</span>
</p>