<br> Line break
Breaks the line inside text, as in a postal address or a poem.
<br> is a void element that ends the line where you put it. It belongs where the line break is part of the content: a postal address, a poem, song lyrics.
Stacking br tags to make space between blocks or to fake paragraphs is a bad habit. Separate <p> elements and CSS margins do that job. You can also write <br/>; HTML treats the slash as optional.
The br element in the HTML Living Standard (opens in a new tab) restricts it to line breaks that belong to the content, such as in poems or addresses. The Paragraphs and Line Breaks lesson shows the difference.
Void element: it has no content and no closing tag.
Syntax
<p>First line<br>
Second line</p>When to use it
A br belongs where the line break is part of the text and would be lost if the lines ran together: a postal address on a label, a poem or song lyric, the signature block at the end of a letter, the lines of a short message on a greeting card.
Everything else has a better tool. Separate thoughts go in separate <p> elements. Items in a row or column form a list. Space between blocks comes from the CSS margin property. A long word or URL that has to break somewhere can use the wbr element or the CSS property overflow-wrap.
Responsive layouts expose a stray br fast. One added so a headline breaks nicely on a laptop forces the same break on a phone, where it can strand a single word on its own line. Let headlines wrap naturally, or use CSS such as text-wrap:balance in browsers that support it. The paragraphs and line breaks lesson lets you compare both approaches.
Live example
Edit the code and watch the preview.
<p>Roses are red,<br>
Violets are blue,<br>
HTML is fun,<br>
And so are you.</p>More examples
Shipping label
A delivery address on a label has fixed lines, so br is the right tool. Because this is a customer's address, not the site owner's contact details, it goes in a plain paragraph rather than an <address> element.
<h2>Ship to</h2>
<p>Maria Jensen<br>
45 Elm Road, Flat 3<br>
Springfield 12345<br>
United States</p>Signature at the end of a letter
The closing of a letter is one unit, a signature block, but each part sits on its own line. A single paragraph with br elements keeps it together while showing the familiar layout of a signed letter.
<p>Thank you for your order. Your cake will be ready on Friday.</p>
<p>Kind regards,<br>
Ana Lopez<br>
Head Baker, Sunny Bakery</p>Tip: Use br for breaks that belong to the content. Never for spacing.
Browser support
Every browser handles br, and has done so since the earliest days of HTML. Its old clear attribute, once used to push text below floated images, is obsolete. The CSS clear property does that job now. In HTML documents, <br> and <br /> give identical results.
Accessibility
Some screen readers announce empty lines or pause oddly at br elements, and fake paragraphs or lists built from them make it worse. The W3C note Understanding Info and Relationships (opens in a new tab) explains why layout should not be faked with line breaks.
Common mistakes
Wrong
<p>Text</p>
<br><br><br>
<p>More text</p>Right
<p>Text</p>
<p style="margin-top:3em">More text</p>A pile of br tags makes fragile spacing. Use CSS margins.
Frequently asked questions
Should I write br, br/ or br / in HTML5?
Any of the three. <br> is a void element and never has an end tag, and HTML allows the trailing slash in <br /> but ignores it. Choose one style and stick with it. The one form that is wrong is </br>, which browsers treat as an error.
When should I use the br tag?
Only where the line break is part of the content, as in the lines of a poem, song lyrics or a postal address. Separating paragraphs, adding vertical space and breaking up headings for layout are all presentation. Handle those with <p> elements and CSS margins, which <br> was never meant to replace. Separate blocks of text get the p element.
Practise it
- Paragraphs and Line Breaks (Module 2: Text)