How to Create a Line Break in HTML

Use the <br> tag when you want text to continue on a new line without starting a new paragraph. This works well for short line-based content like addresses, poems, contact details, or compact UI labels.

What you’ll build or solve

You’ll learn how to force text onto the next line inside the same HTML block using the <br> tag. You’ll also know where this works well and when another element is a better fit.

When this approach works best

This approach is the right choice when the text belongs to the same content block but needs a manual line split.

Common real-world scenarios include:

• Multi-line addresses
• Poetry, lyrics, or short quotes
• Contact details such as name, phone, and email
• Small UI labels inside buttons or cards

This is a bad idea when each line is a separate thought. In that case, use separate <p> elements instead. It is also the wrong tool for adding empty space between sections, where CSS margin or padding works better.

Prerequisites

You only need:

• A basic HTML file
• A text editor
• Basic HTML knowledge

Step-by-step instructions

Step 1: Insert the <br> tag where the new line should start

Place <br> exactly where the text should continue on the next line.

<p>Hello there,<br>welcome to my page.</p>

For multiple manual line breaks in the same block, repeat the same tag where needed.

<p>
  221B Baker Street<br>
  London<br>
  United Kingdom
</p>

What to look for:

• Pressing Enter in your editor does not create a visible line break in the browser
• Use this for addresses, poetry, contact details, and stacked UI labels
• Do not use this for separate ideas, use <p> instead
• Do not use repeated <br> tags to create large vertical gaps
• In HTML5, both <br> and <br /> work

Examples you can copy

Address

<p>
  Mimo Learning Hub<br>
  123 Main Street<br>
  Vienna, Austria
</p>

Contact details

<p>
  Ana Petrović<br>
  +382 67 123 456<br>
  ana@example.com
</p>

Poem snippet

<p>
  The sun goes down,<br>
  the lights appear,<br>
  the city wakes at night.
</p>

Common mistakes and how to fix them

Mistake 1: Pressing Enter instead of using <br>

What the reader might do:

<p>Hello there
welcome to my page.</p>

Why it breaks: HTML collapses source-code line breaks into normal whitespace, so the browser still shows one line.

Corrected approach:

<p>Hello there<br>welcome to my page.</p>

Mistake 2: Using many <br> tags for spacing

What the reader might do:

<p>Section one</p>
<br><br><br>
<p>Section two</p>

Why it breaks: this mixes content structure with layout spacing, which becomes hard to maintain.

Corrected approach:

<p class="section-one">Section one</p>
<p>Section two</p>

<style>
  .section-one {
    margin-bottom: 48px;
  }
</style>

Mistake 3: Using line breaks for separate ideas

What the reader might do:

<p>
  Our app helps you learn coding.<br>
  We also publish tutorials every week.<br>
  You can join from any device.
</p>

Why it breaks: these are separate thoughts, so paragraphs provide better structure and accessibility.

Corrected approach:

<p>Our app helps you learn coding.</p>
<p>We also publish tutorials every week.</p>
<p>You can join from any device.</p>

Troubleshooting

If pressing Enter in your editor does not create a visible new line, add <br> in the HTML.

If you see large empty vertical gaps, remove repeated <br> tags and use CSS margin instead.

If the break appears in the wrong spot, move the <br> tag to the exact split point.

If the content feels hard to read, check whether it should be split into separate paragraphs.

Quick recap

• Use <br> to force a new line inside the same block
• Insert it exactly where the next line should begin
• Repeat the same tag for addresses, poetry, and contact details
• Use paragraphs for separate thoughts
• Use CSS margin for spacing between sections