In HTML, a paragraph always starts on a new line — but what if you want text within a paragraph to start on a new line? In that case, you’ll need to create a line break.

Let’s take a closer look at this HTML element and how to use it.

Download Now: Free Intro Guide to HTML & CSS

What is a line break in HTML?

A line break is the point at which two lines of text are divided. In HTML, the <br> element creates a line break. You can add it wherever you want text to end on the current line and resume on the next.

The HTML line break element can be used to display poems, song lyrics, or other forms of content in which the division of lines is significant.

For example, say you’re writing a blog post about how to address an envelope or package. You want to include an example of how to format the sender’s and recipient’s addresses. In that case, you could use the line break element to place the sender’s and recipient’s names, street addresses, and cities, states, and ZIP codes all on separate lines.

Below you’ll see the same address rendered in two different ways. The first uses one paragraph element and multiple line breaks. The second uses multiple paragraph elements and no line breaks. As a result, the margins are off.  

See the Pen Paragraph vs Line Break Element by Christina Perricone (@hubspot) on CodePen.

Now that we understand the ideal use case of line breaks, let’s walk through how to create them in HTML.

Let’s say I want to display “kitchenette building” by Gwendolyn Brooks on a web page. In that case, I’d wrap the stanzas in <p></p> tags. Then I’d place the <br> tag wherever I want the lines to break in each stanza.

Here’s the HTML:

 
<h2>kitchenette building</h2>
<p>We are things of dry hours and the involuntary plan,<br>
Grayed in, and gray. “Dream” makes a giddy sound, not strong<br>
Like “rent,” “feeding a wife,” “satisfying a man.”</p>
<p>But could a dream send up through onion fumes<br>
Its white and violet, fight with fried potatoes<br>
And yesterday’s garbage ripening in the hall,<br>
Flutter, or sing an aria down these rooms</p>
<p>Even if we were willing to let it in,<br>
Had time to warm it, keep it very clean,<br>
Anticipate a message, let it begin?</p>
<p>We wonder. But not well! not for a minute!<br>
Since Number Five is out of the bathroom now,<br>
We think of lukewarm water, hope to get in it.</p>

<p><em>-Gwendolyn Brooks</em></p>

Here’s the result:

See the Pen Poem with line break element by Christina Perricone (@hubspot) on CodePen.

HTML Line Break Not Working

If the HTML line break is not working — especially if you’re working in the text editor of a CMS like WordPress — then you may be using the element incorrectly.

The most common misuse of the HTML line break element is using it for presentation purposes. For virtually anything related to layout, you should use CSS instead.

For example, say you want to create more space between blocks of text or other items. Instead of using the <br> tag, you should use a semantic HTML element and the CSS margin or padding properties if necessary.

Why? Two reasons. First, using the HTML line break element when a more semantic element is available makes your code less accessible, especially to readers using screen readers.

Secondly, using the <br> tag to force a line break for purely presentation purposes might look good on your browser but not on other browsers or devices — especially if your site is responsive. A responsive site will automatically change the layout based on screen size. So it will already wrap text as needed and wrap text when it comes to a <br> tag. This will result in choppy, uneven blocks of text. Let’s look at an example.

For example, say I’d like to display an excerpt from the play Fleabag: The Scriptures. I should use the blockquote element, which will automatically add margins on the left and right side of the text. If I were to use the <br> tag to mimic the indentation of the blockquote element, then I’d be abusing the HTML element.

Here’s the correct HTML:

 
<figure>
<blockquote>
<p>Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy. It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never thought you would do...</p>
</blockquote>
<figcaption>—PRIEST, <cite>Fleabag: The Scriptures</cite></figcaption>
</figure>

Here's the result:

See the Pen YzZpaRG by Christina Perricone (@hubspot) on CodePen.

If you resize your browser window, you'll notice that the blockquote automatically adjusts to the screen size and has no jagged edges or uneven lines of text. 

Here’s the incorrect HTML:

 
<figure>
<p>Love is awful! It’s awful. It’s painful. It’s frightening, it makes you doubt yourself, judge<br>
yourself, distance yourself from other people in your life. Makes you selfish. Makes you creepy.<br>
It makes you obsessed with your hair. Makes you cruel. Makes you say and do things you never<br>
thought you would do.
<figcaption>—PRIEST, <cite>Fleabag: The Scriptures</cite></figcaption>
</figure>

Here's the result:

See the Pen Incorrectly using <br> element to display excerpt from play by Christina Perricone (@hubspot) on CodePen.

If you resize your browser window, you'll notice that the paragraph element with line break elements results in jagged edges and uneven lines of text. So not only does this code example have accessibility issues — it also has layout issues. That's why it's important to understand when to use the line break element, and when to not. 

To learn more about making your website accessible, check out The Ultimate Guide to Web Accessibility.

Adding Line Breaks in HTML

Whether you want to display poetry, song lyrics, or mailing addresses on your web pages, you’ll need to understand the dos and dont’s of the HTML line break element. Understanding this concept will help you build on your expertise of HTML.

New Call-to-action

 css introduction

Originally published May 20, 2021 7:00:00 AM, updated October 08 2021

Topics:

HTML