HTML Line break

The HTML Line Break tag is used to apply a line break and start your text in the new line.

In HTML, we use the <br> tag to create a line break. For example,

<p>
  Use the <br> br tag <br> to create line breaks in text.
</p>

Browser Output

In the above code, if you look carefully, you can find there is no closing tag for <br>. It's because the <br> tag is an empty tag, which means it doesn't require a closing tag.

As you can see, the <br> tag adds a new line without having to create a new paragraph.

The line break is helpful for writing structured texts like addresses and poems without creating multiple paragraphs.

Line-Break vs Multiple Paragraphs

As we know, an HTML paragraph always starts on a new line, instead of a line break we can also use multiple paragraphs. For example,

<p>Use the</p>
<p> br tag</p>
<p> to create line breaks in text.</p>

Browser Output

We can see we have successfully applied line breaks using multiple paragraphs. However, there are several drawbacks of this approach:

• Screen readers treat each paragraph as separate sentences. That is, Use the, br tag, and to create line breaks in text. will be read as different sentences which will create confusion for users.
• Each paragraph has its own default styling, hence with multiple paragraphs, there will be unnecessary margin and padding between the lines making them not seem as continuous. You can see that in the above output as well.

Example: Line breaks using HTML <br> and <p>

  <p>Roses are red</p>
  <p>Violets are blue</p>
  <p>HTML is Fun</p>
  <p>and so are You!</p>
  
    
  <p>
    Roses are red <br>
    Violets are blue <br>
    HTML is fun <br>
    and so are You!
  </p>

Browser Output