Comment retourner à la ligne en HTML ?

Vous voulez faire un retour à la ligne mais vous ne savez pas comment faire ?

Découvrez toutes les manières de faire des retours à la ligne en HTML !

1. La balise HTML de retour à la ligne br

Pour faire un retour à la ligne en HTML et donc ajouter de l'espace vers le bas, on utilise la balise <br> qui veut dire "break" ("casser"). Cet élément de saut de ligne permet de faire un retour chariot dans le texte.

Exemple :

<div>
  comment<br />
  coder<br />
  .com
</div>

Qui donnera :

Sans les balises <br>, on aurait eu :

comment coder .com

Comme HTML a tendance a couper les espaces blancs d'une chaîne de caractères.

2. La balise HTML élément de rupture thématique hr

La balise hr ("Horizontal Rule" ou règle horizontale en français) permet de créer une ligne horizontale pour séparer visuellement des éléments d'une page HTML. On l'utilise pour faire des retours à lignes plus importants quand on veut diviser du contenu de manière claire.

<hr />

Donnera :

3. La balise HTML paragraphe p

La balise p permet de diviser son texte entre paragraphe. <p> fait un retour à la ligne par défaut. C'est une meilleure pratique de garder son texte dans des p plutôt que dans des div.

<div>
  <p>comment</p>
  <p>coder.com</p>
</div>

Donnera le texte suivant, séparé par un retour à la ligne (et un peu d'espacement supplémentaire) :

4. La balise HTML de division div

La balise div permet de diviser le contenu de votre code HTML. Elle fait un retour à ligne par défaut et on peut donc l'utiliser pour passer à la ligne suivante. Ce n'est pas considéré comme une bonne pratique d'utiliser la balise div vide pour faire des retours à la ligne.

<div>
  comment
  <div></div>
  coder
</div>

Ce qui donnera :

5. Faire des sauts de lignes avec margin et padding

Les balises HTML margin et padding permettent d'ajouter de l'espacement à gauche, à droite mais surtout en haut et en bas. Ce qui nous permettra de faire des retours à ligne plus grands (ou plus petits) en utilisant du style en CSS.

<div>
  <p style="margin-top: 20px">comment</p>
  <p style="margin-bottom: 42px;">coder.com</p>
</div>

Ce qui donnera différents espacements :

Les propriétés les plus utilisées sont :

• margin
• margin-top
• margin-bottom
• padding
• padding-top
• padding-bottom

Aller plus loin en HTML

Voilà, vous savez maintenant comment faire des retours à la ligne en HTML !

Si vous voulez en apprendre plus sur les espaces, j'ai écrit un article Comment faire un espace en HTML ?.

Pensez aussi à consulter mes autres articles sur la page blog de ce site pour trouver d'autres trucs en astuces en développement web.