How to break lines in HTML

To break a line in HTML, the first option is to use the <br> tag. Also, you can create a new line using other ways.

In this post, I will show how you can make a line break in HTML in a couple of different ways.

Let’s get started.

Create a new line in HTML using <br> tag

<br>

Let’s say you want to break a line in a certain position in the paragraph. Write the <br> tag where you want to get a new line. See the HTML below.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum <br> distinctio incidunt necessitatibus numquam odit illum voluptates fugiat.</p>

For the above HTML <br> tag, the last part of the paragraph will start from a new line (as you see in the screenshot below).

break line in html
Effect of the <br> tag

HTML <br> is short for “Break” and it will always make the HTML elements to starting from a new line. And even if it’s an inline-level element such as <img>, <span>, <a>, etc. The <br> tag itself is also an inline element. Learn more about inline & block elements on w3schools.

For example, if you want an anchor tag (link text) to break into two lines, the HTML break tag will also work in this context. (as you see in the HTML & screenshot below)

<a href="/">Learn more <br> about it</a>
new line in html anchor text
New line in HTML anchor text

How to break lines without the <br> tag?

From the above discussion, you knew about the break tag, or short for <br>. But there are other ways to break lines.

But the question is why do you need to learn to break lines without the break tag?

There are some situations in web development where you don’t have enough opportunities to insert additional HTML tags. Especially, when you are working with dynamically generated content or working with loops.

In those types of cases, you have to write CSS to break lines.

To give you an example of a real problem, I have the following HTML:

<div class="container">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus rerum distinctio incidunt.</p>
  <a href="/">Learn more about it</a>
  <img src="./img/flower.jpg" alt="flower">
</div>

In the above HTML, the last two elements are inline-level (anchor & image). And the output looks like the screenshot below.

Output of HTML where the last two are inline-level elements
The output of HTML where the last two are inline-level elements

As you see in the screenshot above, the anchor text (link) and the image stay in the same line. But you can create a line break between these two elements using the following CSS.

img {
  display: block;
}

Only with the one line of CSS, the output looks like the screenshot as you see below.

Line break between two inline-level elements using CSS
Line break between two inline-level elements using CSS

From this discussion, you learned that it’s possible to create line breaks using the CSS “display” property with a “block” value.

The display: block forces an HTML element to consume the full available width.

2 related posts:

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview

Conclusion

The <br> tag is the first option to break a line in HTML. But there are other ways to do it. I showed you how to break lines using the CSS display property. You need to learn both options so you can use the right approach at the right time.