Integrating Line Breaks into HTML Pages
This guide walks through how to use the <br> break tag to add line breaks on a website.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this video, we're going to learn how to add line breaks in HTML.

In our code, we have <hr> tags to put a visible horizontal line, a <p></p> tag to box a bunch of sentences together and a <div></div> tag to compartmentalize different elements. Now, we need a tag for line breaks within a paragraph.

We can create another <div></div> and nest it inside the <p></p> tag, but it's not necessary. An easier way is to use the break tag, such as below:

<br>

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

In the output, you can see the line break.

large

It's similar to the <hr> tag, but only moves the content to a new line, rather than adding padding like the paragraph tag.

You can also force a line break inside a heading tag, like so:

<h1> H1 <br> Tag <h1> 

The output will be:

small

However, it is bad practice to force a line break inside the heading tag. In fact, I've never see a production site that does this.

Personally, I use <br> only rarely because there are many other useful ways that yield similar results without it.