HTML br Tag: The Line Break Element

In HTML, the   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   tag uses an opening tag but no closing tag.


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

 : The tag to insert a line break.

When to Use the Line Break in HTML

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

Poetic Text

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


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

Addresses

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


                  
                    html
                    
                  
                  
                    <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   tag allows you to separate these items clearly.


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

Examples of the HTML br Tag

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

Contact Information

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


                  
                    html
                    
                  
                  
                    <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.


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

Resume or CV

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


                  
                    html
                    
                  
                  
                    <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   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   tags multiple times in a row to create spacing. Instead, use paragraphs and CSS margin for spacing.


                  
                    html
                    
                  
                  
                    <!-- 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   for managing spacing and layout. Using tags like , margins, padding, and line height in CSS can help improve structure. Also, consider using <ul> or <ol> for proper list formatting.


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