Comment passer à la ligne en HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2024-03-02 22:32:03
Thèmes : html - ligne
Question

Bonjour, je n'arrive pas à passer à la ligne en HTML.

Réponse

Pour passer à la ligne en HTML, vous pouvez utiliser la balise <br>.

Cette balise est une balise dites "vide", ce qui signifie qu'elle n'a pas de balise de fermeture correspondante.

Voici un exemple d'utilisation de la balise <br> pour passer à la ligne en HTML :

Ceci est une ligne de texte.<br>
Ceci est une nouvelle ligne de texte.

Le texte "Ceci est une nouvelle ligne de texte." est affiché sur une nouvelle ligne, en dessous du premier texte, grâce à la balise HTML <br>.

Une autre solution pour passer à la ligne en HTML consite à utiliser la balise de paragraphe <p>. Chaque balise <p> crée un nouveau paragraphe, ce qui entraîne automatiquement un saut de ligne avant et après le contenu de la balise.

Voici un exemple d'utilisation de la balise <p> pour créer des lignes de texte distinctes :

<p>Ceci est une ligne de texte.</p>
<p>Ceci est une nouvelle ligne de texte.</p>

Chaque paragraphe est affiché sur une ligne différente. Utiliser des balises de paragraphe <p> est une méthode propre pour structurer votre contenu en lignes distinctes.

Une autre solution encore consiste à utiliser les styles CSS pour forcer un saut de ligne sans avoir besoin d'ajouter une nouvelle balise. Vous pouvez utiliser la propriété CSS white-space avec la valeur pre-line ce qui permet de conserver les espaces et les sauts de ligne dans le texte sans avoir à utiliser explicitement la balise <br>.

Voici un exemple pour forcer un saut de ligne en CSS :

<div style="white-space: pre-line;">
    Ceci est une ligne de texte.
    Ceci est une nouvelle ligne de texte.
</div>

Le texte à l'intérieur de la balise <div> est affiché avec un saut de ligne là où il y a un retour à la ligne dans le code source. Cela permet de conserver la mise en forme du texte tout en évitant d'ajouter des balises supplémentaires dans le code HTML.

Une dernière solution existe mais n'est valable que si le contenu HTML est dans un environnement où les caractères d'échappement sont pris en compte, comme dans une balise <pre> ou dans un attribut CSS white-space: pre;, alors les caractères \r et \n auront un effet similaire à celui qu'ils ont dans d'autres langages, c'est-à-dire qu'ils provoqueront un retour chariot et un saut de ligne respectivement.

Voici un exemple utilisant une balise <pre> pour conserver les retours chariot et les sauts de ligne :

<pre>
Ceci est une ligne de texte avec un retour chariot.\r
Ceci est une nouvelle ligne de texte avec un saut de ligne.\n
</pre>

Les retours chariot et les sauts de ligne seront respectés et le texte sera affiché en conséquence. Toutefois, dans la plupart des cas, il est préférable d'utiliser les balises HTML appropriées comme <br> pour générer des sauts de ligne dans le contenu HTML.