Definition and Usage

The <br> tag represents a line break in text.

Based on typographic conventions, a line break is used as a form of expression to indicate that the following text has been moved to a new line.
The <br> tag is used within a block of text for line breaks that are an intrinsic part of the content itself, such as in poems, addresses, or explanatory text where rhythm and readability are intentionally structured.

The <br> tag is a void element, meaning it cannot have any content and does not have a closing tag (</br>).

Basic Example

HTML 
<p>
    CSS (Cascading Style Sheets) is
    <br> <!-- Insert at the point where you want to break the line to improve readability. -->
    a language used to define the presentation and
    styling of web pages written in HTML (or XML).
</p>
Rendered Output

As shown in the example above, the <br> tag is inserted at the specific point where you intentionally break the text to improve readability.
Text following the <br> tag starts on a new line.

Things to Keep in Mind

The <br> tag should only be used within a block of text for line breaks that are an intrinsic part of the content itself, such as in poems, addresses, or explanatory text where rhythm or readability is intentionally structured.
For simple, non-semantic line breaks, it is recommended to control them using CSS.

Using as Spacing Between Paragraphs

Using the <br> tag between paragraphs creates a gap similar to an empty line. Although this visual effect is achieved through repeated line breaks, using the <br> tag solely for creating such spacing should be avoided.

Instead, it is recommended to control spacing using CSS.

HTML - Incorrect Example 
<p>
    Using the br tag between paragraphs creates spacing similar to an empty line.
</p>
<br>
<p>
    This is a visual effect caused by repeated line breaks,
    but using the br tag to create such spacing
    should be avoided.
</p>

Code Explanation
The <p> tag represents a paragraph.

Rendered Output
HTML - Correct Example 
<p style="margin-bottom: 3em;">  <!-- Adjust spacing using the CSS margin-bottom property -->
    Using the br tag between paragraphs creates spacing similar to an empty line.
</p>
<p>
    This is a visual effect caused by repeated line breaks,
    but using the br tag to create such spacing
    should be avoided.
</p>
Rendered Output

Using the <br> Tag to Separate Paragraphs

Using the <br> tag to separate paragraphs or to divide thematic groups within a block of text can cause web accessibility issues. Because screen readers do not recognize the <br> tag as a structural separator for paragraphs or topics, users relying on these tools may experience confusion while following the context of the content.

HTML - Correct Example 
<p>First paragraph</p>
<p>Second paragraph</p>
HTML - Incorrect Example 
<p>
    First paragraph
    <br>
    Second paragraph
</p>

Using Consecutive <br> Tags for Spacing Effects

Using consecutive <br> tags to create spacing is not consistent with the intended use of the <br> tag—which is to represent a line break in text—and instead serves only a styling purpose.

HTML 
<p>
    CSS (Cascading Style Sheets) is
    <br>
    <br> <!-- Using consecutive <br> tags -->
    a language used to define the presentation and
    styling of web pages written in HTML (or XML).
</p>
Rendered Output

Even in cases where the purpose is purely for styling, it is recommended to use CSS.

HTML 
<p>
    <span style="margin-bottom: 2em; display:inline-block">
        CSS (Cascading Style Sheets) is
    </span>
    <br>
    a language used to define the presentation and
    styling of web pages written in HTML (or XML).
</p>

Code Explanation
The <span> tag is an inline container with no inherent semantic meaning, used to wrap plain text or other inline content to provide a scope for styles, attributes, or scripts.

Rendered Output

Applying CSS

The <br> tag itself does not generate a layout and only performs a line break.
Most CSS properties, except for display: none, have no effect on the <br> tag.

CSS 
br {
    display: none; /* Can be applied.
                      When applied, the line break behavior is removed */
}
CSS 
br {
  width: 100px;       /* ❌ Not applied */
  height: 20px;       /* ❌ Not applied */
  margin: 10px;       /* ❌ Not applied */
  padding: 5px;       /* ❌ Not applied */
  background: red;    /* ❌ Not applied */
  border: 2px solid black; /* ❌ Not applied */
}

As shown in the following example, you can implement a responsive design where text is broken into lines on desktop for readability, and not broken on narrower mobile screens.

HTML 
<p>
    CSS (Cascading Style Sheets) is
    <br>
    a language used to define the presentation and
    styling of web pages written in HTML (or XML).
</p>
CSS 
@media (max-width: 750px) {
    br {
        display: none; /* Applied in mobile layouts */
    }
}
Rendered Output Resize the browser window to see the effect.
On desktop, line breaks are used to improve readability, while on narrower mobile screens, the text is displayed without line breaks.

Technical Summary

Technical Summary of the br tag
Permitted parents Any element that accepts phrasing content.
Permitted content None; it is a void element.
Implicit ARIA role No corresponding role
Permitted ARIA roles presentation, none

Browser Compatibility

Browser compatibility for the br tag
Tag
Desktop Chrome
Chrome
Desktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<br> 1 12 1 4

Specifications

Specification for the br tag
Specification
<br> HTML Standard
#the-br-element

References

See Also