- Read Tutorial
- Watch Guide Video
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.
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:
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.