<br>
Defines a single line break
Standard HTMLQuick Answer
What is the <br> tag?
The <br> tag inserts a single line break in text. It's a self-closing tag (<br> or <br/>) that doesn't require a closing tag. Use it for breaking lines in poems, addresses, or contact information. For creating space between paragraphs or sections, use CSS margins or <p> tags instead.
Definition and Usage
The <br> tag inserts a single line break in
text. It's a void element, meaning it doesn't have a closing tag
and doesn't contain any content.
The <br> tag is useful for writing addresses,
poems, or any text where line breaks are significant to the
meaning or presentation.
<br> tag is an
empty/void element, which means it has no closing tag. In HTML,
you can write it as <br> or
<br /> (XHTML style).
<br> to
create space between paragraphs or elements. Use CSS margin or
padding instead for proper semantic structure.
Browser support and standards
Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.
Read the MDN element referenceGlobal Attributes
The <br> tag supports all HTML global
attributes such as class, id,
style, etc.
<br> tag has no
specific attributes of its own. It only supports global attributes
that are common to all HTML elements.
Examples
Basic Line Break
Simple use of the <br> tag:
Example
<p>This is the first line.<br />This is the second line.</p>Line Breaks in Addresses
Using <br> to format postal addresses:
Example
<address>
HTML Free Codes<br />
123 Web Street<br />
San Francisco, CA 94102<br />
United States
</address>Line Breaks in Poems or Lyrics
Using <br> to preserve line structure in
poetry:
Example
<p>
Roses are red,<br />
Violets are blue,<br />
HTML is great,<br />
And so are you!
</p>Multiple Line Breaks (Bad Practice)
Avoid using multiple <br> tags for spacing:
Example - Don't Do This
<!-- Bad practice: Using multiple br tags for spacing -->
<p>First paragraph</p>
<br /><br /><br />
<p>Second paragraph with too much space above</p>CSS Alternative for Spacing
Instead of multiple <br> tags, use CSS:
Example - Good Practice
<style>
.spaced-paragraph {
margin-bottom: 40px;
}
</style>
<p class="spaced-paragraph">First paragraph</p>
<p>Second paragraph with proper spacing</p>Display Block Alternative
Using CSS display property instead of <br>:
Example
<style>
.break-text span {
display: block;
}
</style>
<p class="break-text">
<span>Line 1</span>
<span>Line 2</span>
<span>Line 3</span>
</p>Contact Information
Formatting contact details with line breaks:
Example
<p>
<strong>Contact Us:</strong><br />
Email: info@example.com<br />
Phone: (555) 123-4567<br />
Hours: Mon-Fri, 9am-5pm
</p>Try it Yourself
Interactive Example
See how line breaks appear:
This is line one.
This is line two.
This is line three.
Example Address:
John Doe
456 Main Street
New York, NY 10001
Best Practices
-
Use for inline line breaks only: Use
<br>when you need a line break within the same block of content -
Don't use for spacing: Never use multiple
<br>tags to create vertical space between elements - Use CSS margin/padding: For spacing between elements, always use CSS properties instead
-
Avoid in lists: Don't use
<br>instead of proper list markup (<ul>,<ol>) - Valid use cases: Addresses, poems, song lyrics, or text where line breaks are semantically meaningful
- Accessibility: Screen readers announce line breaks, so use them only when the break is meaningful to the content
-
Semantic structure: If you need separate
paragraphs, use
<p>tags instead of<br> -
Clear intent: Use
<br>only when a line break is part of the content's meaning, not for layout purposes
When NOT to Use <br>
Avoid using the <br> tag in these situations:
| Situation | Why to Avoid | Better Alternative |
|---|---|---|
| Creating vertical space | Not semantic; poor accessibility | Use CSS margin or padding |
| Separating paragraphs | Breaks document structure | Use <p> tags for each paragraph |
| Creating lists | Loses semantic meaning |
Use <ul> or <ol> with
<li>
|
| Responsive layouts | Doesn't adapt to screen size | Use CSS flexbox or grid |
| Separating sections | No semantic structure |
Use <section> or
<div> with CSS
|
Accessibility Considerations
-
Screen readers: Most screen readers will
announce a line break or pause briefly when encountering
<br> -
Meaningful breaks: Only use
<br>when the line break adds meaning to the content - Avoid excessive breaks: Too many line breaks can create a confusing experience for screen reader users
- Alternative text structure: Consider if the content would be better structured using headings, lists, or paragraphs
-
ARIA roles: The
<br>tag doesn't need ARIA attributes as it has clear semantic meaning
CSS Styling
While you typically don't style <br> directly,
you can control line height and spacing:
Example
<style>
/* Control line height of parent element */
.poem {
line-height: 2;
}
/* Hide br on certain screen sizes */
@media (min-width: 768px) {
.mobile-break {
display: none;
}
}
</style>
<p class="poem">
First line of poem<br>
Second line of poem<br>
Third line of poem
</p>
<p>
Mobile layout<br class="mobile-break">
Desktop layout
</p>