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.

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


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

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

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.


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>

Product Features

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

   12-hour battery life<br>
   Lightweight design

Resume or CV

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

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

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 -->
    Paragraph 1.<br><br><br>
    Paragraph 2.

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

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.
    This is another block of text.

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

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.
Learn to Code in Python for Free
Start learning now
To advance beyond this tutorial and learn Python by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.

Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.

You can code, too.

© 2023 Mimo GmbH