HTML br Tag: The Dos and Don'ts of Adding an HTML Line Break (2024)

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 an HTML line break.

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

Below is an HTML file with a <p> and <br> element.

Most times, the <p> tag is enough to divide your content. But the <br> tag can be useful in certain situations.

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, unnecessary padding and margins are added between lines.

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

Pro tip: When you want a section of content that’s related to appear on different lines, like a postal address or stanza of a poem, use line break elements instead of paragraph elements.

While I would recommend using line breaks for the above example, it does have a few caveats.

Should you use the HTML <br> element?

Yes, but only after you've exhausted other options.

The HTML <br> element is used to insert a line break or a single empty line in a block of text. While it may seem convenient, I would generally not recommend using <br> to create spacing or structure in your content.

Here's why:

• No Semantic Meaning: The <br> tag doesn't have semantic meaning in HTML, like a <p> or a <div> tag, which denotes a paragraph and divided section, respectively. I would describe <br> as an "empty" tag that has visual but not structural significance in HTML. That's problematic, so <br> elements are best avoided unless there's no other option.
• Lack of Accessibility: Screen readers and other assistive technologies may not recognize <br> as a visual line break. This can lead to confusion for users who rely on assistive technology to navigate and understand content.
• Responsiveness Issues: <br> is a hard-coded line break and doesn't adapt well to different screen sizes or responsive layouts. When the content is viewed on different devices or browser windows, it can result in inconsistent line spacing and readability problems.

As I said, it's best to exhaust other options first. Here's what I would recommend:

• Margin and Padding: Use CSS properties like margin and padding to create spacing between paragraphs, headings, or other elements. This allows for more control over the spacing and ensures consistency across different devices.
• Block-level Elements: Use appropriate block-level elements, such as <p>, <div>, or <section>, to separate different sections of content. These elements naturally create vertical space and structure.
• CSS Flexbox and Grid: If you need to create more complex layouts and spacing, CSS Flexbox and Grid are powerful tools for setting up flexible and responsive designs. They allow for precise control over the spacing and positioning of elements.

Unfamiliar with the above concepts? Download our free guide below to learn more about HTML and CSS basics and hacks.

Now that we understand the ideal use case of line breaks and other alternatives you should try first, let’s walk through how to create them in HTML.

Now, let's go over the quick facts of the HTML line break tag.

<br> Accessibility

The <br> tag famously poses accessibility problems, which is why you should use it with caution. Here are some considerations to keep in mind:

• Screen Readers: <br> elements can pose challenges for screen readers because they don't provide any clear indication of a visual line break.
• Responsive Design: <br> is a static line break that doesn't adapt well to responsive design. When a website is viewed on different devices or screen sizes, the line break created by <br> could result in inconsistent spacing and layout issues.
• Keyboard Navigation: For individuals who navigate websites using only a keyboard, excessive or improper use of <br> elements can disrupt the logical flow and navigation of the content.
• Assistive Technology Compatibility: While most modern assistive technologies can handle the <br> element to some extent, there is no standard behavior defined for this element.

Now, let's look at an example of accessibility issues posed by the <br> tag.

Say I’d like to display an excerpt from the play Fleabag: The Scriptures. I should use the block quote element, which will automatically add margins on the left and right side of the text.

But for the sake of experimentation, let's use the <br> tag to mimic the indentation of the block quote element.

Here’s the incorrect HTML:

Here's the result:

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

That looks odd, right?

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 not to.

Here’s the correct HTML with the <blockquote> element applied:

Here's the result:

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

Much better.

Using the block quote element is not only better for accessibility — it's also better for a responsive web design.

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

Pro tip: Use a semantic element, like the block quote element, when applicable to make your site more accessible to readers using a screen reader. It's much better to use a semantically meaningful HTML element, or CSS styling, to avoid layout issues like choppy text and jagged edges.

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

<br> CSS Styles

Unlike other HTML elements, the <br> element does not have any specific CSS styles that apply to it directly.

CSS styles are typically applied to elements that have block-level or inline-block display properties. In contrast, the <br> element is an empty element without any content or specific layout.

That said, you can indirectly affect the styling of line breaks by applying styles to the container around the <br> element.

<br> Browser Support

The HTML line break element is supported by all modern web browsers. This includes:

1. Google Chrome
2. Mozilla Firefox
3. Microsoft Edge
4. Safari
5. Opera
6. Brave
7. Internet Explorer (versions 8 and above)

HTML <br> Break Tag Examples

Since the <br> element is most commonly used to display poems or addresses, let's look at an example. 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 new line HTML tag <br> wherever I want the lines to break in each stanza.

Here’s the HTML:

Here’s the result:

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

Pro tip: Place a <br> element at each point where you want the line of text to break. Meaning, the text after the <br> will begin at the start of the next line of the text block.

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 new line HTML tag is using it for design and layout 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.

1. Using the HTML line break element when a more semantic element is available makes your code less accessible, especially to readers using screen readers.
2. Using the <br> tag to force a line break for purely layout 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 wrap text as needed, which will result in choppy, uneven blocks of text if you use <br> tags.

You should use margin and padding first, or block-level elements such as paragraphs and divs.

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 don'ts of the HTML line break element. Understanding this concept will help you build on your expertise of HTML.

For more on creating web pages, check out HubSpot's free CMS tools.

Editor's note: This post was originally published in May 2021 and has been updated for comprehensiveness.