For paragraph breaks instead of line breaks. Learn more →
<br> - The Line Break Element
The <br> Element
Section titled “The <br> Element”The line break element produces a line break in text. It’s useful for content where line breaks are significant, such as poems, addresses, or song lyrics.
Quick Example
Section titled “Quick Example” Result
Syntax
Section titled “Syntax”<!-- HTML5 --><br>
<!-- XHTML (also valid in HTML5) --><br />The <br> element is a void element (self-closing), meaning it has no content or closing tag.
Common Use Cases
Section titled “Common Use Cases”Postal Addresses
Section titled “Postal Addresses” Result
Poems and Verse
Section titled “Poems and Verse” Result
Song Lyrics
Section titled “Song Lyrics” Result
Contact Information
Section titled “Contact Information” Result
Code Output
Section titled “Code Output” Result
When NOT to Use <br>
Section titled “When NOT to Use <br>”Don’t Use for Spacing
Section titled “Don’t Use for Spacing”<!-- Don't use <br> for vertical spacing --><p>First paragraph</p><br><br><p>Second paragraph</p><!-- Use CSS for spacing --><style> p { margin-bottom: 2em; }</style><p>First paragraph</p><p>Second paragraph</p>Don’t Use Instead of Paragraphs
Section titled “Don’t Use Instead of Paragraphs”This is the first paragraph.<br><br>This is the second paragraph.<br><br>This is the third paragraph.<p>This is the first paragraph.</p><p>This is the second paragraph.</p><p>This is the third paragraph.</p>Don’t Use for Layout
Section titled “Don’t Use for Layout”<div> Name: John<br><br><br> Email: [email protected]</div><div class="form-group"> <label>Name: John</label></div><div class="form-group"></div>Styling Line Breaks
Section titled “Styling Line Breaks”You can style the space around line breaks using CSS:
Result
Accessibility
Section titled “Accessibility”Screen Reader Behavior
Section titled “Screen Reader Behavior”Screen readers announce <br> as a pause or line break, helping users understand the content structure.
Semantic Alternatives
Section titled “Semantic Alternatives”Consider more semantic alternatives when appropriate:
<!-- Instead of this --><p> Task 1<br> Task 2<br> Task 3</p>
<!-- Consider this --><ul> <li>Task 1</li> <li>Task 2</li> <li>Task 3</li></ul>Don’t Create Fake Paragraphs
Section titled “Don’t Create Fake Paragraphs”Line one<br><br>Line two<br><br>Line three<p>Line one</p><p>Line two</p><p>Line three</p>Responsive Considerations
Section titled “Responsive Considerations”Line breaks are fixed and don’t adapt to screen size. For responsive layouts, consider CSS instead:
Result
Valid Examples
Section titled “Valid Examples”Business Card
Section titled “Business Card” Result
Recipe Steps
Section titled “Recipe Steps” Result
Browser Support
Section titled “Browser Support”| Browser | Version | Notes |
|---|---|---|
| Chrome | 1+ | Full support |
| Firefox | 1+ | Full support |
| Safari | 1+ | Full support |
| Edge | 12+ | Full support |
| IE | 3+ | Full support |
The <br> element has been supported since the earliest browsers.
Related Elements
Section titled “Related Elements”
Suggests optional line break opportunities. Learn more →
For thematic breaks between content. Learn more →