← Back to All Tags

<br>

Defines a single line break

Standard HTML

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.

Tip: The <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).
Important: Don't use <br> to create space between paragraphs or elements. Use CSS margin or padding instead for proper semantic structure.

Browser Support

The <br> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Global Attributes

The <br> tag supports all HTML global attributes such as class, id, style, etc.

Note: The <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>

Related Tags

  • <p>

    Defines a paragraph

  • <hr>

    Defines a thematic break

  • <wbr>

    Defines a word break opportunity

  • <pre>

    Defines preformatted text

  • <address>

    Defines contact information

  • <div>

    Defines a section in a document