- Line break translates this sentence into English, output plain text directly, do not output other content

The <br> tag is one of the simplest elements in HTML, specifically designed to insert line breaks in text. Its function is similar to pressing the Enter key in plain text, but unlike paragraph tags, it doesn't create additional vertical spacing.

Basic Syntax of the <br> Tag

<br> is an empty tag that doesn't require closing and can be placed directly where a line break is needed:

First line<br>Second line

Browser rendering effect:

First line
Second line

Differences from Paragraph Tags

Both <p> and <br> can achieve line breaks, but they have fundamental differences:

<p>First paragraph</p>
<p>Second paragraph</p>

First line<br>Second line

Key differences:

1. Semantic meaning: <p> represents a paragraph, while <br> only indicates a line break.
2. Spacing: <p> creates default paragraph spacing.
3. Structure: <p> is a block-level element, while <br> is an inline element.

Practical Use Cases

Formatting Address Information

<address>
  Haidian District, Beijing<br>
  No. 5 Zhongguancun South Street<br>
  100081
</address>

Poetry or Lyrics Layout

<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 think of home
</p>

Form Instructions

<label>
  Password requirements:<br>
  - At least 8 characters<br>
  - Include uppercase and lowercase letters<br>
  - Include special symbols
</label>

Advanced Usage

Combining with CSS

Although <br> is primarily used for content structure, its appearance can be controlled with CSS:

br {
  display: none; /* Hide all line breaks */
}

.address br {
  display: block; /* Display in specific contexts */
  margin-bottom: 0.5em; /* Custom spacing */
}

Alternative in Responsive Design

In mobile development, <br> is sometimes used for responsive line breaks:

<h2>Product Name<br><span class="subtitle">Product Subtitle</span></h2>

With CSS media queries:

@media (min-width: 768px) {
  h2 br {
    display: none;
  }
  .subtitle {
    display: inline;
  }
}

Considerations

1. Avoid Overuse: Using multiple consecutive <br> tags for spacing is poor practice.

   <!-- Bad example -->
   Content<br><br><br><br>More content
   

2. Alternative Solutions: In most cases, CSS should be used to control spacing.

   .spacer {
     margin-bottom: 2em;
   }
   

3. Accessibility: Screen readers typically ignore <br>, so important content shouldn't rely on it.

4. Difference from Whitespace: HTML collapses consecutive whitespace, while <br> ensures line breaks.

Special Scenario Handling

Behavior in Preformatted Text

Inside <pre> tags, <br> will stack with native line breaks:

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

Performance in Flex/Grid Layouts

In modern layouts, <br> may produce unexpected effects:

<div style="display: flex;">
  <span>Item 1</span><br>
  <span>Item 2</span>
</div>

In this case, <br> won't create the expected line break because Flex containers reset line-breaking behavior for child elements.

Browser Compatibility

The <br> tag is perfectly supported in all browsers, including:

• All versions of Chrome, Firefox, Safari
• IE6 and above
• All major mobile browsers

HTML5 Attributes

HTML5 introduced a new attribute for the <br> tag:

<br clear="all"> <!-- Deprecated, do not use -->

Modern development should use CSS's clear property instead:

.clear-both {
  clear: both;
}

Comparisons with Other Languages

1. Markdown: Equivalent to two spaces at the end of a line.
2. LaTeX: Corresponds to the \\ command.
3. Plain Text: Uses line break characters (CR/LF) directly.

Performance Considerations

While a single <br> tag has negligible performance impact, excessive use can be problematic:

<!-- Not recommended -->
<div>
  <br><br><br><br><br><br><br><br><br>
</div>

In such cases, CSS padding or margin should be used instead.

Usage in Template Engines

Different template engines handle <br> differently:

Vue.js

<p>{{ message }}<br>{{ subMessage }}</p>

React

<div>
  {line1}<br />
  {line2}
</div>

PHP

echo $line1 . "<br>" . $line2;

Historical Evolution

The <br> tag has existed since HTML 2.0 and has undergone the following changes:

1. HTML4: Supported the clear attribute.
2. XHTML: Required writing as <br />.
3. HTML5: Reverted to <br> and deprecated the clear attribute.

Behavior in Rich Text Editors

Differences in how common rich text editors handle <br>:

1. CKEditor: Uses <p> tags by default but can be configured to use <br>.
2. TinyMCE: Shift+Enter inserts <br>, while Enter inserts <p>.
3. Quill: Supports <br> through the line-break module.

Test Cases

Code to verify <br> behavior:

<!DOCTYPE html>
<html>
<head>
  <title>br Tag Test</title>
  <style>
    .test-case {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px 0;
    }
  </style>
</head>
<body>
  <div class="test-case">
    Text without line break
    <br>
    Text after line break
  </div>
  
  <div class="test-case">
    <p>Compare paragraph spacing</p>
    <p>with line break differences</p>
    First line<br>Second line
  </div>
</body>
</html>