The line break tag (br) translates this sentence into English.

Basic Concepts of the Line Break Tag (br)

The line break tag <br> is one of the simplest elements in HTML, used to create line breaks in text. It does not require a closing tag and is an empty element. Unlike the paragraph tag <p>, <br> only produces a simple line break without adding extra vertical spacing between lines.

This is the first line<br>
This is the second line

Syntax Characteristics of the br Tag

The <br> tag has two forms in HTML5:

1. Traditional form: <br>
2. XHTML style: <br />

Although both forms work correctly in browsers, the HTML5 specification recommends using the simpler <br> form. This tag can include global attributes but does not support any unique attributes (the clear attribute from earlier HTML versions is deprecated).

<!-- Recommended form -->
Address：<br>
Chaoyang District, Beijing<br>
No. 1 Jianguomenwai Avenue

<!-- Can also be written as -->
Address：<br />
Chaoyang District, Beijing<br />
No. 1 Jianguomenwai Avenue

Common Use Cases for the br Tag

Formatting Addresses and Contact Information

The <br> tag is particularly useful for displaying address information, maintaining vertical alignment without extra spacing:

<div class="address">
  Recipient: Zhang San<br>
  Address: No. 1 Zhongguancun Street, Haidian District, Beijing<br>
  Postal Code: 100080<br>
  Phone: 138-1234-5678
</div>

Poetry and Lyrics Layout

When poems or lyrics require specific line breaks, <br> is more straightforward than CSS:

<p>
  Quiet Night Thoughts<br>
  Moonlight before my bed,<br>
  Could it be frost instead?<br>
  Head raised, I watch the moon;<br>
  Head lowered, I miss my hometown.
</p>

Hint Text in Forms

When adding multi-line hints next to form elements:

<label for="username">Username：</label>
<input type="text" id="username">
<br>
<small>Enter 4-16 characters, letters, numbers, and underscores are allowed</small>

Comparison Between br Tag and CSS

While <br> can achieve line breaks, modern web design often uses CSS margin and padding properties for more flexible control:

<!-- Using br -->
<p>First line<br>Second line</p>

<!-- Using CSS -->
<p>First line</p>
<p class="no-margin">Second line</p>

<style>
  .no-margin {
    margin-top: 0;
  }
</style>

Notes on Using the br Tag

1. Avoid Overuse: Using multiple <br> tags consecutively to create large spacing is poor practice; CSS margin or padding should be used instead.

<!-- Not recommended -->
<p>Content</p>
<br><br><br>
<p>More content</p>

<!-- Recommended -->
<p>Content</p>
<p style="margin-top: 3em;">More content</p>

2. Semantic Issues: <br> only represents a visual line break and carries no semantic meaning. For paragraphs or content blocks, use <p> or other semantic tags.

3. Responsive Design: Over-reliance on <br> in responsive layouts may cause display issues on different screen sizes.

Special Use Cases for the br Tag

Usage Within pre Tags

The <pre> tag preserves whitespace and line breaks in text, but additional <br> tags may still be needed:

<pre>
  First line
  Second line<br>
  Third line
</pre>

Combined with the white-space CSS Property

When CSS sets white-space: pre or pre-line, the behavior of <br> may differ:

<div style="white-space: pre-line;">
  This text will
  preserve line breaks<br>
  Just like the pre tag
</div>

Accessibility Considerations for the br Tag

Screen readers typically interpret <br> as a pause or slight interruption. Overuse may lead to disjointed reading experiences. For important content separation, more semantic elements should be used.

<!-- Poor for accessibility -->
<p>Item 1<br>Item 2<br>Item 3</p>

<!-- Better practice -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Changes to the br Tag Across HTML Versions

1. HTML 2.0: Introduced the <br> tag
2. HTML 4.01: Added the clear attribute (for controlling line breaks around floating elements)
3. XHTML: Required self-closing form <br />
4. HTML5: Reverted to the simple <br> form and deprecated the clear attribute

Alternatives in Practical Development

In some cases, the following alternatives can be considered:

1. Using Block-Level Elements:

<span class="line">First line</span>
<span class="line">Second line</span>

<style>
  .line {
    display: block;
  }
</style>

2. Using Flexbox Layout:

<div class="multiline">
  <span>First line</span>
  <span>Second line</span>
</div>

<style>
  .multiline {
    display: flex;
    flex-direction: column;
  }
</style>

Special Role of the br Tag in HTML Emails

In HTML emails, where CSS support is limited, the <br> tag is more commonly used:

<table>
  <tr>
    <td>
      Dear Customer：<br><br>
      Thank you for your message.<br>
      We have received your question...
    </td>
  </tr>
</table>

Browser Rendering Differences

Although the behavior of the <br> tag is mostly consistent across browsers, there are still differences in some special cases:

1. Some older versions of IE browsers render multiple consecutive <br> tags inconsistently
2. Mobile browsers sometimes ignore excessive <br> tags
3. The effect of <br> in print style sheets may differ from screen display

Performance Considerations

From a performance perspective, the <br> tag is lightweight, but excessive use can increase the number of DOM nodes. In extreme cases (e.g., thousands of <br> tags), it may impact page rendering performance.