Sauter une ligne en HTML

1. Utilisez la balise <p> pour sauter une ligne en HTML
2. Utiliser deux balises <br> pour sauter une ligne en HTML
3. Définissez la propriété opacity de la balise <hr> sur 0 pour sauter une ligne en HTML
4. Utilisez la propriété CSS margin pour sauter une ligne en HTML

Cet article explorera plusieurs façons d’ignorer ou d’ajouter une ligne en HTML.

Utilisez la balise <p> pour sauter une ligne en HTML

La façon la plus simple de sauter une ligne en HTML est d’utiliser la balise <p>. La balise <p>, un élément de paragraphe, crée des paragraphes en HTML.

Les paragraphes sont des éléments de niveau bloc représentant un bloc de texte dans un document HTML. On peut toujours trouver une ligne blanche entre deux paragraphes.

C’est ainsi que deux paragraphes peuvent être identifiés. Une ligne est automatiquement sautée à l’aide de l’élément <p>.

Mettons-le en œuvre dans un exemple simple.

Tout d’abord, créez une balise <p> et écrivez le texte de votre choix à l’intérieur de la balise. Ensuite, créez une autre balise <p> et écrivez également le contenu d’un paragraphe à l’intérieur.

L’extrait de code ci-dessous ajoute une ligne vide entre deux textes. C’est ainsi que nous pouvons sauter une ligne entre les textes en HTML.

Exemple de code :

<p>
 The first paragraph
</p>
<p>
 The second paragraph
</p>

Utiliser deux balises <br> pour sauter une ligne en HTML

On peut aussi utiliser la balise <br> pour sauter une ligne en HTML. Le <br>, un élément de saut de ligne, saute une seule ligne.

Il créera une ligne vide lorsqu’il est utilisé deux fois car il coupe deux lignes consécutives. La balise n’a pas de balise fermante ; c’est ce qu’on appelle une balise vide.

Une application de la balise <br> consiste à diriger le texte vers une nouvelle ligne lors de l’écriture de poèmes.

Regardez l’exemple ci-dessous, où nous avons implémenté la balise <br> pour sauter une ligne entre deux strophes d’un poème. La balise <br> à la fin de la première ligne coupe la ligne et dirige vers la ligne suivante.

Après la deuxième ligne, nous avons utilisé deux balises <br>. Le premier casse la ligne et se dirige vers la troisième ligne.

Ensuite, la deuxième balise <br> coupe la troisième ligne et crée une ligne vide. Après cela, nous avons écrit une autre strophe de poème en utilisant une seule balise <br> à la fin de chaque ligne.

Ainsi, l’exemple montre comment sauter une ligne entre des textes en utilisant deux balises <br>.

Exemple de code :

<p>
 got out of the bed at four, not seven<br>
 after meditation, it was like heaven<br>
 <br>
 kept myself up, coding till eleven<br>
 lately i've been doing Java, I 'll be using Maven
</p>

Définissez la propriété opacity de la balise <hr> sur 0 pour sauter une ligne en HTML

Cette méthode implémentera une astuce pour sauter une ligne en HTML. L’astuce consiste à utiliser la balise <hr> et à la rendre invisible.

La balise <hr> crée une ligne horizontale. On peut mettre la propriété CSS opacity de la ligne horizontale à 0.

En conséquence, l’espace occupé par la ligne horizontale ressemblera à une ligne vide.

Par exemple, écrivez un texte de votre choix. Créez ensuite une ligne horizontale à l’aide de la balise <hr>.

Appliquez les styles CSS en ligne avec l’attribut style. Définissez la propriété opacity sur 0. Après le <hr>, écrivez une autre ligne.

Ici, la valeur 0 de la propriété opacity rend la ligne horizontale complètement transparente. La valeur 0 rend l’élément complètement transparent, et la valeur 1 le rend complètement opaque.

Par conséquent, l’exemple montre comment on peut sauter une ligne entre des textes en utilisant la balise <hr> et la propriété opacity.

Exemple de code :

The line before blank line
<hr style="opacity:0">
The line after blank line

Utilisez la propriété CSS margin pour sauter une ligne en HTML

Nous allons maintenant discuter de la dernière méthode pour sauter une ligne en HTML en utilisant la propriété CSS margin.

On peut utiliser la balise <section> pour représenter la section du texte à écrire après une ligne sautée. Ensuite, nous pouvons appliquer la marge en haut de cette section afin qu’un espace vide se produise.

Par exemple, écrivez un texte de votre choix. Ensuite, créez un élément <section> et écrivez du texte à l’intérieur.

En CSS, sélectionnez l’élément section et définissez sa propriété margin sur 1em 0. La valeur 1em ressemble à la marge en haut et en bas de la section.

En conséquence, un espace vide d’une taille équivalente à la taille de la police sera créé en haut et en bas du texte.

C’est ainsi que l’on peut utiliser la propriété CSS margin pour créer une ligne vide en HTML.

Code HTML:

This is the first line
<section>This is the line after the skipped line</section>

Code CSS :

section {
 margin: 1em 0;
}