HTML br Tag: The Line Break Element

In HTML, the <br> tag is a single-line break element that creates a line break in text. The HTML line break element can format text without relying on block-level elements like paragraphs.

How to Use the Line Break in HTML

As an empty tag, the <br> tag uses an opening tag but no closing tag.

<p>This is the first line.<br>This is the second line.</p>

• <br>: The tag to insert a line break.

When to Use the Line Break in HTML

The <br> tag is straightforward yet powerful for controlling the flow of text. Here are some typical use cases:

Poetic Text

You can use the <br> tag to format poems or any text where the division of lines is significant to the content.

<p>
    Roses are red,<br>
    Violets are blue,<br>
    Sugar is sweet,<br>
    And so are you.
</p>

Addresses

Moreover, you can use <br> to format postal addresses on web pages, ensuring that each component of the address appears on a new line.

<address>
    John Doe<br>
    123 Elm Street<br>
    Springfield, IL 62701
</address>

Creating Lists without Bullets

Sometimes, you might want to list items linearly without using bullet points. The <br> tag allows you to separate these items clearly.

<p>
    Milk<br>
    Bread<br>
    Butter
</p>

Examples of the HTML br Tag

Here are several examples to demonstrate how the <br> tag can be useful on web pages:

Contact Information

The <br> tag helps separate lines in contact information, allowing for better readability.

<p>Contact Information:<br>
   Phone: 123-456-7890<br>
   Email: example@email.com
</p>

Product Features

Line breaks might also enable a product webpage to list features in a compact form without needing a list structure.

<p>Features:<br>
   Waterproof<br>
   12-hour battery life<br>
   Lightweight design
</p>

Resume or CV

On a resume webpage, the <br> tag might help format the sections for education and work experience.

<p>
    <strong>Education:</strong><br>
    B.A. in Graphic Design, University XYZ<br>
    Graduated: 2021
</p>
<p>
    <strong>Experience:</strong><br>
    Graphic Designer at ABC Corp<br>
    2021 - Present
</p>

Learn More About the HTML br Tag

Accessibility Considerations

While the <br> tag adds line breaks, using it for spacing between paragraphs or as a way to format lists can confuse screen readers. To maintain accessibility, avoid using <br> tags multiple times in a row to create spacing. Instead, use paragraphs and CSS margin for spacing.

<!-- Incorrect usage: multiple <br> tags for spacing -->
<p>
    Paragraph 1.<br><br><br>
    Paragraph 2.
</p>

<!-- Correct usage: using CSS margin for spacing -->
<p style="margin-bottom: 1em;">
    Paragraph 1.
</p>
<p>
    Paragraph 2.
</p>

Alternatives to the Line Break Tag in HTML

CSS and proper semantic HTML offer alternatives to <br> for managing spacing and layout. Using tags like <p>, margins, padding, and line height in CSS can help improve structure. Also, consider using <ul> or <ol> for proper list formatting.

<!-- Using CSS for spacing and layout -->
<div style="margin-bottom: 1em;">
    This is a block of text.
</div>
<div>
    This is another block of text.
</div>

<!-- Using the <ul> element instead of multiple <br> tags -->
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

HTML Break Line Best Practices

• Use the <br> tag sparingly. Overusing <br> tags can make HTML documents cluttered and harder to read.
• Consider the semantic structure of your HTML and use more appropriate tags like <p>, <h1><h6>, <ul>, <ol>, and <div> where possible.
• When using the <br> tag in responsive designs, ensure that line breaks make sense on all screen sizes.