Quand on débute en HTML, on se retrouve rapidement confronté à des questions simples mais essentielles, comme celle de savoir comment créer un retour à la ligne. En effet, contrairement à un traitement de texte classique, sauter une ligne dans le code HTML n’entraîne pas automatiquement un saut à l’affichage. Comprendre le fonctionnement des balises de retour à la ligne permet non seulement de structurer ses contenus plus proprement, mais aussi de mieux maîtriser la présentation d’une page web. Dans cet article, voyons ensemble les différentes méthodes pour faire un retour à la ligne en HTML, comprendre leurs usages spécifiques, et voir comment les appliquer dans différents contextes. Que vous soyez débutant ou que vous cherchiez simplement à rafraîchir vos connaissances, ce guide complet vous fournira toutes les clés pour gérer correctement les retours à la ligne dans vos projets HTML.

Utiliser la balise <br> pour insérer un retour à la ligne

La manière la plus directe et la plus simple d’ajouter un retour à la ligne en HTML est d’utiliser la balise <br>. Cette balise, dont le nom est l’abréviation de break (saut), permet d’insérer un saut de ligne à un endroit précis du contenu, sans pour autant créer un nouveau paragraphe. C’est une solution très utilisée lorsqu’on souhaite garder un bloc de texte compact tout en contrôlant précisément où les lignes doivent se couper. Elle est particulièrement utile dans des contextes où la présentation sur plusieurs lignes est nécessaire, mais où la structure du contenu ne justifie pas la création de paragraphes distincts. Par exemple, dans des signatures, des poèmes, des messages courts ou encore des listes d’informations personnelles (comme des coordonnées), cette balise offre une grande souplesse d’affichage. Voici un exemple concret d’utilisation :

<p>Voici une phrase.<br>Et voici une nouvelle ligne.</p>

Ce code affichera dans le navigateur :

Voici une phrase.
Et voici une nouvelle ligne.

Autrement dit, le texte s’affichera sur deux lignes distinctes, tout en faisant partie du même paragraphe HTML. Cela permet de conserver une mise en page fluide sans ajouter de structure supplémentaire. Voici quelques points importants à garder à l’esprit concernant la balise <br> :

• Elle est auto-fermante : En HTML5, il suffit d’écrire <br>, sans balise de fermeture. Il est inutile et incorrect d’utiliser </br>, qui n’existe pas ;
• Elle ne crée pas de marge verticale : Contrairement à la balise <p>, qui introduit un espacement avant et après chaque paragraphe, <br> se contente d’un simple saut à la ligne, sans espace ajouté :
• Elle convient à des structures légères : Elle est idéale pour les contenus courts et structurés en lignes, comme une adresse postale, une signature d’email, des paroles de chanson ou encore une liste de faits dans un même paragraphe.

Voici quelques exemples concrets où la balise <br> est particulièrement adaptée :

<p>
Jean Dupont<br>
123 rue de la République<br>
75001 Paris<br>
France
</p>

Ce type de mise en page permet de respecter la logique du contenu, tout en garantissant une présentation claire et lisible pour l’utilisateur. Il est également possible d’utiliser plusieurs balises <br> à la suite si l’on souhaite créer un espace entre deux lignes. Toutefois, cette pratique est déconseillée dans une optique de mise en forme propre : Pour gérer les espacements, mieux vaut recourir à des styles CSS (avec des marges ou des espacements définis).

Les alternatives et bonnes pratiques pour gérer les sauts de ligne en HTML

Si la balise <br> offre une solution rapide pour créer des retours à la ligne, elle ne doit pas devenir un outil systématique de mise en page. Une utilisation excessive peut vite rendre le code difficile à maintenir, peu lisible et peu évolutif, notamment dans le cadre de sites web dynamiques ou responsive. Heureusement, HTML, en complément de CSS, offre des solutions plus adaptées et plus flexibles pour gérer les espacements et la structure du contenu.

Dans cette section, nous allons explorer plusieurs alternatives à <br>, ainsi que les bonnes pratiques à adopter pour un code HTML propre, maintenable et cohérent avec les standards du web moderne.

Utiliser les feuilles de style CSS

La gestion des espacements verticaux entre les éléments d’une page est bien mieux assurée par le CSS (Cascading Style Sheets). Le CSS permet de séparer le contenu de sa présentation, ce qui favorise la clarté du code, la réutilisabilité des composants et la flexibilité du design sur différents supports (ordinateur, tablette, mobile).

Plutôt que d’insérer manuellement des balises <br> pour créer des sauts visuels, il est préférable de jouer avec les propriétés margin et padding en CSS :

<div style="margin-bottom: 20px;">
  Premier bloc
</div>
<div>
  Deuxième bloc
</div>

Le même rendu peut être obtenu de manière plus propre grâce à une feuille CSS externe, surtout si vous devez appliquer ce style à plusieurs éléments :

div {
  margin-bottom: 20px;
}

Cette méthode est recommandée dans tous les projets professionnels ou collaboratifs, car elle garantit :

• Une séparation claire entre la structure HTML et le design.
• Une modification facilitée : changer un seul style dans le fichier CSS mettra à jour tout le site.
• Une meilleure compatibilité avec les frameworks CSS modernes (comme Bootstrap ou Tailwind).
• Une adaptation responsive plus simple grâce aux media queries.

En bref, utiliser CSS pour gérer l’espacement revient à confier le design à l’outil qui lui est destiné, et à conserver un HTML plus clair et plus sémantique.

Conserver les retours à la ligne du texte brut

Par défaut, HTML ignore tous les sauts de ligne et espaces supplémentaires du code source. Cela signifie que même si vous écrivez un texte en sautant une ligne dans votre éditeur, il s’affichera comme un bloc continu dans le navigateur, sauf si vous utilisez des balises spécifiques. Pour afficher un texte brut avec ses sauts de ligne, espaces et indentations, la balise HTML <pre> (abréviation de preformatted text) est idéale. Elle conserve l’apparence originale du texte, et le rend en police monospace par défaut :

<pre>
Ceci est une ligne.
Ceci est une autre ligne.
</pre>

Ce type de rendu est particulièrement utile dans les cas suivants :

• Affichage de blocs de code informatique.
• Présentation de logs, messages système ou commandes terminal.
• Affichage de textes formatés comme des poèmes ou dialogues.
• Documentation technique avec indentation spécifique.

Attention toutefois : la balise <pre> est à réserver aux contenus où la structure du texte a une réelle importance visuelle. Elle ne doit pas être utilisée pour simuler des sauts de ligne dans un texte courant, au risque de nuire à l’accessibilité et à la lisibilité.

Limiter l’usage excessif de <br>

Un écueil courant chez les débutants est d’empiler plusieurs balises <br> pour créer des espaces verticaux importants, dans le but de « descendre » un élément ou d’aérer artificiellement une mise en page :

<br><br><br>

Si cette pratique peut fonctionner ponctuellement, elle est déconseillée dans une logique de développement web propre et durable. Elle complique la lecture du code, n’est pas responsive, et pose des problèmes d’uniformité d’affichage selon les navigateurs ou les tailles d’écran. Pour obtenir un espacement vertical maîtrisé, mieux vaut s’appuyer sur le CSS, comme dans l’exemple suivant :

<div style="margin-top: 40px;">
  Nouveau contenu espacé
</div>

Ce type de code est beaucoup plus lisible, maintenable, et surtout prévisible. Vous avez un contrôle précis sur l’espacement, que vous pouvez ajuster à volonté en pixels, en em ou en pourcentage. De plus, ces styles sont facilement adaptables à différents formats d’écran via les @media queries.

Ainsi, la balise <br> a sa place dans un HTML bien structuré, mais son usage doit rester ponctuel. Pour la gestion de l’espace et de la disposition des blocs, CSS est votre meilleur allié.

Aller plus loin : Comprendre la logique des blocs et des éléments en ligne en html

Pour aller plus loin dans la gestion des retours à la ligne en HTML, il est essentiel de comprendre une notion structurante de ce langage : la distinction entre les éléments de type bloc et les éléments en ligne (inline). Cette différence influe directement sur la manière dont le navigateur interprète et affiche le contenu, en particulier en ce qui concerne les retours à la ligne automatiques, la disposition des éléments, ou encore leur comportement dans une mise en page responsive. Les éléments de type bloc (block-level elements) s’étendent par défaut sur toute la largeur disponible de leur conteneur parent. Ils commencent toujours sur une nouvelle ligne et provoquent un saut de ligne avant et après eux. Ce sont eux qui structurent visuellement la page, en créant des sections, des paragraphes, des titres ou des blocs d’information distincts.

À l’inverse, les éléments en ligne (inline elements) ne provoquent pas de saut de ligne : ils s’insèrent naturellement dans le flux du texte, côte à côte, comme des mots dans une même phrase. Ils sont souvent utilisés pour styliser ou insérer des éléments ponctuels sans casser la ligne (liens, mots en gras, images intégrées, etc.). Voici quelques exemples typiques pour mieux visualiser cette distinction :

Pourquoi est-ce important ? Parce que c’est cette logique qui détermine si vous devez utiliser une balise <br> ou non. Si deux éléments bloc s’enchaînent, un retour à la ligne est naturellement appliqué par le navigateur. En revanche, deux éléments en ligne se positionneront l’un à la suite de l’autre, et nécessiteront une intervention si vous souhaitez les séparer visuellement.

Exemple d’un comportement par défaut

Voici un exemple illustrant le comportement d’un élément de type bloc :

<div>Premier bloc</div>
<div>Deuxième bloc</div>

Le navigateur Web affichera ceci :

Premier bloc  
Deuxième bloc

Les deux blocs apparaissent l’un en dessous de l’autre, car <div> est une balise de type bloc. Aucun <br> n’est nécessaire pour provoquer cette disposition. En revanche, un code comme celui-ci :

<span>Texte en ligne</span>
<span>Autre texte en ligne</span>

affichera les deux morceaux de texte sur la même ligne :

Texte en ligne Autre texte en ligne

Les balises <span> étant en ligne, le contenu s’enchaîne naturellement sans retour à la ligne. Pour modifier ce comportement, vous pouvez :

• Insérer une balise <br> entre les deux éléments.
• Utiliser du CSS pour changer leur affichage avec display: block; ou display: inline-block;.

Pourquoi cette distinction est-elle importante ?

Connaître cette différence vous permet d’anticiper les comportements du navigateur et de structurer vos pages de façon logique. Plutôt que de forcer des sauts de ligne avec <br>, il est souvent plus efficace d’utiliser la bonne balise selon le contexte, et de confier la présentation visuelle au CSS. Cette approche vous permet également :

• D’avoir un HTML plus lisible et mieux organisé.
• De faciliter l’accessibilité et la compatibilité avec les lecteurs d’écran.
• D’améliorer la maintenabilité de votre code, en évitant les ajustements manuels ligne par ligne.
• De mieux intégrer vos contenus dans des systèmes de mise en page modernes (flexbox, grid, composants réutilisables, etc.).

Maîtriser la différence entre les éléments bloc et en ligne, c’est anticiper le comportement des sauts de ligne sans toujours devoir les coder manuellement. Cela vous rapproche d’un HTML plus propre et plus efficace.