The Tag in HTML: Line Breaks and When to Use Them

The   tag inserts a line break:

<p>First line<br>Second line</p>

The text breaks at the   but stays in the same paragraph. This differs from using multiple  tags, which create separate blocks with spacing.

Self-Closing Syntax

The   tag is void—it has no content or closing tag. In HTML5, write it as:

<br>

XHTML required the self-closing slash:

<br />

Both work in modern browsers. HTML5 doesn't require the slash, but including it doesn't hurt. Most linters accept either.

br vs p: Semantic Difference

Paragraphs () are semantic units. Line breaks ( ) are presentational within those units:

<!-- Separate thoughts - use paragraphs -->
<p>This is one idea.</p>
<p>This is another idea.</p>

<!-- Related lines - use br -->
<p>
    John Smith<br>
    123 Main St<br>
    New York, NY 10001
</p>

The address is one logical unit (a mailing address) split across lines for readability. Use  . Separate concepts go in separate  tags.

Legitimate Use Cases

Addresses:

<address>
    Acme Corporation<br>
    456 Business Blvd<br>
    Suite 789<br>
    San Francisco, CA 94105
</address>

Poetry and lyrics:

<p>
    Two roads diverged in a yellow wood,<br>
    And sorry I could not travel both<br>
    And be one traveler, long I stood<br>
    And looked down one as far as I could
</p>

Line breaks are part of the poem's structure. Paragraphs would add unwanted spacing.

Contact information:

<p>
    Questions? Contact us:<br>
    Email: support@example.com<br>
    Phone: (555) 123-4567
</p>

Signature blocks:

<p>
    Best regards,<br>
    Jane Doe<br>
    Senior Developer
</p>

When NOT to Use br

For spacing between paragraphs:

<!-- Bad -->
<p>First paragraph.</p>
<br><br>
<p>Second paragraph.</p>

<!-- Good - use CSS -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

<style>
p { margin-bottom: 20px; }
</style>

Spacing is presentation. Control it with CSS, not markup.

For layout:

<!-- Bad -->
<h1>Title</h1>
<br><br><br>
<p>Content starts here</p>

<!-- Good - use CSS margins -->
<h1>Title</h1>
<p>Content starts here</p>

<style>
h1 { margin-bottom: 60px; }
</style>

For responsive line breaks:

<!-- Bad - breaks on mobile too -->
<h1>Long Title That<br>Breaks Awkwardly</h1>

<!-- Good - let browser handle wrapping -->
<h1>Long Title That Breaks Naturally</h1>

Browsers wrap text automatically based on container width. Hard-coded   tags break in unwanted places on different screen sizes.

Accessibility

Screen readers pause briefly at   tags. This is usually fine for addresses and poetry where breaks are meaningful.

But excessive   usage creates choppy reading. Each break interrupts flow. If you're using many   tags, reconsider the structure.

The Tag Alternative

For suggesting optional break points without forcing them:

<p>This-is-a-very-<wbr>long-<wbr>hyphenated-<wbr>word</p>

The browser breaks at  only if the line is too long. Otherwise, the word stays together. This is better than   for responsive layouts.

CSS Alternatives

For controlled breaks based on content width, use CSS:

.address {
    white-space: pre-line;
}

<p class="address">
John Smith
123 Main St
New York, NY 10001
</p>

white-space: pre-line preserves line breaks in the HTML source without   tags.

Or use flexbox with flex-wrap for automatic wrapping:

.contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

<div class="contact-info">
    <span>Email: support@example.com</span>
    <span>Phone: (555) 123-4567</span>
</div>

Multiple br Tags

Stacking   tags is almost always wrong:

<!-- Anti-pattern -->
<p>Text</p>
<br><br><br><br>
<p>More text</p>

This is presentation (spacing) in markup. Use CSS:

<p>Text</p>
<p style="margin-top: 80px;">More text</p>

Or better, add a class:

<p>Text</p>
<p class="large-top-margin">More text</p>

<style>
.large-top-margin { margin-top: 80px; }
</style>

Forms and Labels

Avoid   for form layout:

<!-- Bad -->
<label>Name:</label>
<br>
<input type="text">
<br><br>
<label>Email:</label>
<br>
<input type="email">

<!-- Better - use div or CSS -->
<div>
    <label>Name:</label>
    <input type="text">
</div>
<div>
    <label>Email:</label>
    <input type="email">
</div>

<style>
div { margin-bottom: 15px; }
label { display: block; }
</style>

Semantic markup with CSS styling is more flexible and accessible.

SEO Impact

  tags don't affect SEO directly. Search engines see them as line breaks within text. They don't change ranking or readability scores.

But excessive   usage suggests poor HTML structure, which indirectly affects SEO through reduced content quality signals.

Email HTML

Email HTML has limited CSS support.   tags are more acceptable in email templates where CSS layout doesn't work consistently:

<!-- Email template - br is acceptable -->
<p>
    Thanks for your order!<br>
    Order #12345<br>
    <br>
    Shipping to:<br>
    123 Main St<br>
    New York, NY
</p>

Email clients strip or ignore much CSS.   works reliably across all clients.