How to Skip a Line in HTML

1. Use the <p> Tag to Skip a Line in HTML
2. Use Two <br> Tags to Skip a Line in HTML
3. Set the opacity Property of the <hr> Tag to 0 to Skip a Line in HTML
4. Use the CSS margin Property to Skip a Line in HTML

This article will explore several ways to skip or add a line in HTML.

Use the <p> Tag to Skip a Line in HTML

The simplest way to skip a line in HTML is using the <p> tag. The <p> tag, a paragraph element, creates paragraphs in HTML.

Paragraphs are block-level elements representing a block of text in an HTML document. We can always find a blank line between two paragraphs.

That is how two paragraphs can be identified. A line is automatically skipped using the <p> element.

Let’s implement it in a simple example.

First, create a <p> tag and write some text of your choice inside the tag. Next, create another <p> tag and write some paragraph contents inside it too.

The code snippet below adds a blank line between two texts. This is how we can skip a line between texts in HTML.

Example Code:

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

Use Two <br> Tags to Skip a Line in HTML

We can also use the <br> tag to skip a line in HTML. The <br>, a line break element, breaks a single line.

It will create a blank line when used twice as it breaks two consecutive lines. The tag does not have a closing tag; it is called an empty tag.

One application of the <br> tag is directing the text to a new line while writing poems.

Look at the example below, where we have implemented the <br> tag to skip a line between two stanzas of a poem. The <br> tag at the end of the first line breaks the line and directs to the next line.

After the second line, we have used two <br> tags. The first one breaks the line and directs to the third line.

Then, the second <br> tag breaks the third line and creates a blank line. After that, we have written another poem stanza using a single <br> tag at the end of each line.

Thus, the example demonstrates how we can skip a line between texts using two <br> tags.

Example 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>

Set the opacity Property of the <hr> Tag to 0 to Skip a Line in HTML

This method will implement a trick to skip a line in HTML. The trick is using the <hr> tag and making it invisible.

The <hr> tag creates a horizontal line. We can set the horizontal line’s CSS opacity property to 0.

As a result, the space occupied by the horizontal line will look like a blank line.

For example, write a text of your choice. Next, create a horizontal line using the <hr> tag.

Apply CSS styles in an inline manner with the style attribute. Set the opacity property to 0. After the <hr>, write another line.

Here, the 0 value of the opacity property makes the horizontal line completely transparent. The value 0 makes the element completely transparent, and the value 1 makes it completely opaque.

Consequently, the example demonstrates how we can skip a line between texts using the <hr> tag and the opacity property.

Example Code:

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

Use the CSS margin Property to Skip a Line in HTML

Now, we will discuss the final method for skipping a line in HTML using the CSS margin property.

We can use the <section> tag to represent the section of the text to write after a skipped line. Then, we can apply the margin to the top of that section so that blank space will occur.

For example, write a text of your choice. Next, create a <section> element and write some text inside it.

In CSS, select the section element and set its margin property to 1em 0. The value 1em resembles the margin to the top and the bottom of the section.

As a result, blank space with a size equivalent to the font size will be created at the top and bottom of the text.

This is how we can use the CSS margin property to create a blank line in HTML.

HTML Code:

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

CSS Code:

section {
 margin: 1em 0;
}