Live Preview
Text with a line break:
This text is on one line.
This text is on the next line.
HTML <br> Tag
Overview
What You’ll Learn
By the end of this tutorial, you’ll know when to use line breaks and when CSS or paragraphs are the better choice.
Void Element Syntax
Write valid self-closing <br> elements in HTML5.
Line Break Behavior
Understand how br moves text to the next line within the same block.
br vs p
Choose line breaks for addresses and poetry; use p for distinct paragraphs.
Address Formatting
Format postal lines inside the address element with br.
CSS Alternative
Use margin and separate p tags instead of stacked br tags.
Production Tips
Apply accessibility best practices for meaningful line breaks.
Fundamentals
What Is the <br> Tag?
The br element (<br>) produces a line break in text. Unlike <p>, it does not create a new paragraph block—it only breaks to the next line within the current flow of content.
Void element—no closing tag
<br> is a void (self-closing) element. Write <br> or <br /> in XHTML-style HTML5. There is no </br> closing tag.
Use br when line breaks are part of the content meaning—addresses, poetry, song lyrics, or signature lines. Avoid stacking multiple br tags for page layout spacing.
Foundation
📝 Syntax
Insert <br> where you want the line to break. Both forms are valid in HTML5:
syntax.html
<!-- Basic line break -->
This is some text.<br>
And this is on a new line.Syntax Rules
bris a void element—no closing tag required.- Place it inline where the line break should occur within text content.
- XHTML-style
<br />is also valid in HTML5. - Do not use multiple
brtags for vertical spacing—use CSSmargininstead.
xhtml-style.html
<p>
Line one.<br />
Line two.
</p>Cheat Sheet
⚡ Quick Reference
| Use Case | Code Snippet | Result |
|---|---|---|
| Single break | Line one.<br>Line two. | Line one. |
| Inside paragraph | <p>...<br>...</p> | First line. |
| Address lines | <address>...<br>...</address> | Postal formatting |
| Paragraph spacing | <p>...</p><p>...</p> | Prefer over stacked br |
| Layout spacing | p { margin: 1rem 0; } | CSS, not br |
| Void element | <br> or <br /> | No closing tag |
Comparison
⚖️ <br> vs <p>
Choose the right element based on whether you need a line break or a new paragraph block:
| Feature | <br> | <p> |
|---|---|---|
| Purpose | Line break within one block | New paragraph block |
| Spacing | No paragraph margin added | Default top/bottom margin |
| Best for | Addresses, poetry, lyrics | Distinct prose paragraphs |
| Element type | Void (self-closing) | Block with opening/closing tags |
br-vs-p.html
<!-- Line break within one block -->
<p>Line one.<br>Line two.</p>
<!-- Separate paragraphs -->
<p>First paragraph.</p>
<p>Second paragraph.</p>Reference
🧰 Attributes
The <br> tag has no tag-specific attributes in HTML5. Use global attributes only:
class / id GlobalHook for CSS styling. Rarely needed on br, but valid for targeted styling.
<br class="spacer">clear ObsoleteDeprecated attribute for clearing floated images. Do not use—apply CSS clear instead.
/* Use CSS clear instead */Element type VoidSelf-closing element with no content and no closing tag. Cannot contain child elements.
<br> or <br />Allowed in PhrasingInside paragraphs, address, headings (when appropriate), and other phrasing content contexts.
<p>, <address>, text flowThe clear attribute is obsolete in HTML5. Use CSS clear property on block elements for float clearing.
Hands-On
Examples Gallery
Real-world line break patterns with copy-ready code, live previews, and hands-on practice.
Single Line Break
The most common use: one <br> to move text to the next line.
single-line-break.html
<p>
This text is on one line.<br>
This text is on the next line.
</p>📚 Common Use Cases
Use <br> when line breaks are part of the content itself—not for general page layout spacing.
Multiple Line Breaks
Stacking <br> tags creates extra blank lines. Avoid this for layout—use CSS margin instead.
multiple-line-breaks.html
<p>
This is on the first line.<br><br>
This is on the third line after two breaks.
</p>Address Formatting
A proper use case: line breaks inside an <address> element for postal formatting.
address-br.html
<address>
CodeToFun HQ<br>
123 Web Street<br>
Chennai, Tamil Nadu 600001<br>
India
</address>CSS Spacing Alternative
For spacing between blocks of text, use separate <p> elements with CSS margin instead of multiple <br> tags.
css-spacing.html
<style>
p { margin: 0 0 1rem; }
</style>
<p>This is the first paragraph.</p>
<p>This is a separate paragraph with CSS spacing.</p>Design
Spacing Without <br>
Prefer CSS margin on block elements instead of stacked line breaks for layout spacing:
<br> Content line breaksp { margin } Paragraph spacinggap / padding Layout spacingbr + br Avoid for layout paragraph-spacing.css
/* Better than stacked br tags */
p {
margin: 0 0 1rem;
}
/* Last paragraph: no bottom margin */
p:last-child {
margin-bottom: 0;
}CSS-spaced paragraphs (no br)
First paragraph with margin spacing.
Second paragraph—clean and maintainable.
A11y
♿ Accessibility
Line breaks affect how assistive technologies read content:
- Don’t stack br for spacing — screen readers may announce each break awkwardly.
- Use p for paragraphs — gives proper document structure to assistive tech.
- Addresses and poems —
bris appropriate when line position carries meaning. - Prefer semantic elements — wrap addresses in
address, not plain divs with br.
🧠 How <br> Works
1
Author inserts br in text
Place the void element where a line break should occur within content.
Markup
2
Browser breaks the line
Text after br continues on the next line in the same block.
Rendering
3
No new paragraph created
Unlike p, br does not add paragraph spacing or a new block box.
Behavior
=
Controlled line breaks
Use br sparingly for meaningful breaks. Use p and CSS for layout.
Compatibility
Universal Browser Support
The <br> element is supported in all browsers and has universal compatibility.
Baseline · Since HTML 2
Works everywhere your users are
From legacy Internet Explorer to the latest Chromium builds — the br element is one of the most universally supported HTML tags.
100% Core tag support
Google Chrome All versions · Desktop & Mobile
Full supportMozilla Firefox All versions · Desktop & Mobile
Full supportApple Safari All versions · macOS & iOS
Full supportMicrosoft Edge All versions · Chromium & Legacy
Full supportInternet Explorer IE 6+ · Legacy environments
Full supportOpera All modern versions
Full support<br> tag 100% supported
Bottom line: Use <br> with confidence for meaningful line breaks. Supported in every production environment today.
Wrap Up
Conclusion
The <br> tag is a simple but important element for line breaks within text. Use it for addresses, poetry, and lyrics where line position matters.
For paragraph spacing and page layout, prefer <p> and CSS over stacked br tags.
Pro Tips
💡 Best Practices
✅ Do
- Use
brfor addresses and poetry - Wrap addresses in
addresselement - Use
ptags for separate paragraphs - Use CSS
marginfor layout spacing
❌ Don’t
- Stack multiple
brtags for vertical spacing - Use
brinstead ofpfor paragraphs - Use the obsolete
clearattribute - Rely on
brfor page layout structure
Summary
Key Takeaways
Knowledge Unlocked
Six truths every developer should know about <br>
Bookmark these before you ship — they’ll keep your line breaks meaningful and accessible.
6
Core concepts 01
Line Breaks
<br> inserts a line break within text without starting a new paragraph.
02
Void Element
Self-closing with no closing tag—write <br> or <br />.
03
br vs p
br = same block; p = new paragraph with spacing.
04
Address Formatting
Ideal for postal lines, poetry, and lyrics where line position matters.
Use Case 05
Use CSS for Spacing
Prefer margin on block elements over stacked br tags.
06
Universal Support
Supported in every browser including IE. No polyfills required.
Compatibility❓ Frequently Asked Questions
It inserts a line break, moving the following text to the next line within the same text block.
Yes.
br is a void element. Write <br> or <br />—no closing tag needed.br breaks a line within one block. p starts a new paragraph with its own spacing.No. Use CSS
margin or separate p elements. Stacked br tags are hard to maintain and hurt accessibility.When line breaks are part of the content meaning: postal addresses, poetry, song lyrics, or signature blocks.
Practice Line Breaks
Try single and multiple br examples in the interactive editor.
About the author
6 people found this page helpful