Balise : comment insérer un saut de ligne en HTML

La balise <br> en HTML, simple en apparence, cache derrière elle une multitude de nuances et de pratiques, et a son importance dans la structuration des pages web.

<br> et <br /> : quelle est la différence ?

La balise <br> est très utilisée dans le développement web : elle permet d'insérer des sauts de ligne dans le texte d'une page web. Cette simple balise a cependant deux variations dans sa syntaxe, chacune ayant ses propres particularités.

La balise <br> est considérée comme une balise vide en HTML, ce qui signifie qu'elle n'a ni contenu ni balise fermante. Sa présence seule dans le code suffit à indiquer où un saut de ligne est nécessaire. 

See the Pen saut-de-ligne-html-balise-br by HubSpot France (@HubSpot-France) on CodePen.

En HTML 4.01, la syntaxe de cette balise prend une forme légèrement différente : <br/>. Cette variation inclut un espace suivi d'un slash (/) à la fin de la balise. Cette spécificité est en accord avec les règles du langage XML, qui exigent que toutes les balises ouvertes soient fermées. Ainsi, pour que le code HTML 4.01 soit considéré comme valide, cette syntaxe est nécessaire. 

See the Pen saut-de-ligne-html-balise-br-4.01-5 by HubSpot France (@HubSpot-France) on CodePen.

Avec l'évolution d'internet et des normes web, la syntaxe de la balise <br> a été simplifiée en HTML 5, ce qui reflète les changements dans la pratique du développement web. Cette évolution est due au fait que HTML 5 ne repose pas sur les mêmes bases que le XML, ce qui rend cette exigence de fermeture de balise moins stricte.

La question se pose alors de savoir quelle syntaxe utiliser. Pour une compatibilité maximale, notamment avec les anciennes versions d'HTML et les navigateurs qui ne prennent pas en charge HTML 5, il est recommandé d'utiliser la syntaxe <br />. Cette approche assure une meilleure compatibilité et évite les erreurs potentielles de validation ou d'interprétation du code. De plus, cette syntaxe s'aligne mieux avec d'autres balises vides en HTML, telles que <im />, <input />, et <meta />.

Dans quels cas la balise <br> est-elle nécessaire ?

La balise <br> en HTML est un outil simple et puissant pour contrôler la mise en page d'un texte sur une page web. Pour optimiser un site web, il est essentiel de comprendre l'impact de chaque élément HTML sur le rendu et les performances de la page. L'utilisation d'un éditeur HTML avancé peut aider à gérer automatiquement les sauts de ligne et d'autres éléments, simplifiant la création de contenu web. Cependant, il est important de savoir quand et comment l'utiliser correctement pour maintenir la clarté et la structure du contenu.

Les situations inappropriées pour l'utilisation de la balise <br>

Premièrement, il est important de souligner les contextes où l'usage de la balise <br> n'est pas approprié. C'est le cas notamment de 2 situations spécifiques :

• Pour créer des espaces entre les éléments de la page tels que les paragraphes, les titres, les images, ou les listes. Au lieu de cela, les propriétés CSS de margin et padding devraient être utilisées. Ces propriétés offrent un contrôle précis sur l'espace autour et à l'intérieur des éléments. Par exemple, pour ajouter un espace de 20 pixels après un paragraphe :

p {margin-bottom: 2 0px ; 

• Pour créer des colonnes ou des tableaux. Dans ce cas, il est préférable d'utiliser des éléments HTML tels que les balises <div>, <table>, <tr>, <td>, ou des propriétés CSS comme display, float, ou grid. Ces outils fournissent des moyens flexibles pour structurer le contenu. Par exemple, pour créer deux colonnes de largeur égale :

<div style=" display: flex;">

<div style=" flex: 1;" >Colonne 1</div>

<div style=" flex: 1;" >Colonne 2</div>

</div>

Les cas pertinents d'utilisation de la balise <br>

Maintenant que ces deux cas particuliers ont été évoqués, voici les situations où l'utilisation de la balise <br> est non seulement appropriée, mais surtout nécessaire :

• Pour insérer un saut de ligne dans un texte, afin de le structurer visuellement. La balise <br> permet de passer à la ligne sans créer de nouveau paragraphe.

<p>Ceci est la première ligne.<br> Et ceci la seconde ligne.</p>

• Dans un formulaire, pour séparer visuellement différents champs, comme un bouton HTML ou des zones de texte.

 <label>Prénom :</label><br> <input type="text"><br>\<label>Nom :</label><br> <input type="text">

• Dans des adresses postales, pour passer à la ligne après chaque information.

<p>12 rue des Lilas<br> 75000 Paris</p>

• En poésie, pour marquer des sauts de ligne et structurer visuellement le texte.

<p>Il pleure sans raison<br> Dans ce cœur qui s'écœure<br> Quoi ! Nulle trahison<br> Ce deuil est sans raison</p>

• Dans les e-mails, pour séparer des paragraphes ou insérer des retours à la ligne dans le corps du texte.

La balise <br> sert à insérer des sauts de ligne n'importe où dans un texte HTML, sans créer de nouveau paragraphe.

Comment faire un saut de ligne en HTML ?

La balise <br> est souvent la première méthode qui vient à l'esprit pour faire un saut de ligne en HTML, grâce à sa simplicité et sa fréquence d'utilisation. Cependant, en fonction du contexte et des besoins spécifiques, d'autres méthodes peuvent s'avérer plus appropriées. Par exemple, l'utilisation d'un iframe peut être nécessaire pour intégrer du contenu d'une autre source tout en préservant sa mise en forme originale où la création d'un lien HTML se fait avec la balise <a> et non avec des balises <br> répétées pour positionner le lien. Cela garantit une meilleure accessibilité et conformité aux standards du web.

Voici les différentes méthodes pour faire un saut de ligne en HTML :

• La balise <br> : cette balise s'insère là où un saut de ligne est nécessaire, sans besoin de la refermer. Elle peut être utilisée de manière répétitive pour créer des sauts de ligne successifs. Par exemple :

<p>Ceci est un paragraphe<br>avec un saut de ligne</p>

<p>Ceci est un autre paragraphe<br><br>avec deux sauts de ligne</p>

• La balise <p> : elle démarre un nouveau paragraphe avec un espace naturel avant et après. Cette balise doit être ouverte et fermée autour du texte du paragraphe et ne peut pas être imbriquée dans une autre balise <p>. Par exemple :

<p>Ceci est un paragraphe</p>

<p>Ceci est un autre paragraphe</p>

• La balise <pre> : elle préserve la mise en forme originale du texte, y compris les espaces et les sauts de ligne. Cette balise est idéale pour l'affichage de code, de poésie ou de texte préformaté. Exemple :

<pre>

Ceci est un texte avec des espaces et des sauts de ligne

</pre>

• La propriété CSS white-space : cette propriété contrôle la gestion des espaces et sauts de ligne dans le texte. Elle offre différentes valeurs, telles que normal, nowrap, pre, pre-wrap, ou pre-line :
  • normal : les espaces et les sauts de ligne sont ignorés
  • nowrap : les espaces et les sauts de ligne sont ignorés et le texte ne passe pas à la ligne
  • pre : les espaces et les sauts de ligne sont préservés, comme dans la balise <pre>
  • pre-wrap : les espaces et les sauts de ligne sont préservés, mais le texte passe à la ligne si nécessaire
  • pre-line : les espaces sont ignorés, mais les sauts de ligne sont préservés, et le texte passe à la ligne si nécessaire
  • Par exemple :

<p style=" white-space: nowrap;" >Ceci est un paragraphe avec la valeur nowrap de white-space. Les espaces et les sauts de ligne sont ignorés, et le texte ne passe pas à la ligne.</p>

Pour aller plus loin, découvrez comment effectuer des vérifications et des changements en masse dans votre code ou vos données en téléchargeant le guide sur les regex ; ou découvrez le CMS de HubSpot.