HTML br Tag: A Step-by-Step Guide

What is the br Tag?

The HTML <br> tag is used to insert a line break within text. It is an empty element, meaning it doesn’t have a closing tag, and is primarily used to improve the formatting of content within paragraphs, lists, or other textual elements.

Syntax

<br>

Key Features of the br Tag

  1. Creates a single line break in text.
  2. Does not require a closing tag.
  3. Commonly used for poems, addresses, or formatting content where line breaks are necessary.

Usage Examples

1. Basic Example

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

Rendered Output:

This is the first line.
This is the second line after a line break.

2. Formatting an Address

<address>
  John Doe<br>
  123 Main Street<br>
  Springfield, USA
</address>

Rendered Output:

John Doe
123 Main Street
Springfield, USA

3. Creating Line Breaks in Poetry

<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is awesome,<br>
  And so are you!
</p>

Rendered Output:

Roses are red,
Violets are blue,
HTML is awesome,
And so are you!

When to Use br

  • To create line breaks in content where semantic grouping (like paragraphs) is not appropriate.
  • For formatting addresses, poems, or song lyrics.
  • Avoid using <br> excessively to control spacing. Use CSS for layout and spacing instead.

Example of Full Page Usage

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn how to use the HTML <br> tag to add line breaks in content effectively.">
  <title>HTML `<br>` Tag Example</title>
</head>
<body>
  <h1>Using the HTML `<br>` Tag</h1>
  <p>
    Welcome to the world of HTML!<br>
    This guide will teach you how to use the `<br>` tag effectively.
  </p>
  
  <h2>Contact Information</h2>
  <address>
    Jane Doe<br>
    456 Elm Street<br>
    Metropolis, USA
  </address>
  
  <h2>A Poem</h2>
  <p>
    Code is poetry,<br>
    Lines that shine,<br>
    Elegant solutions,<br>
    One at a time.
  </p>
</body>
</html>

Common Mistakes to Avoid

Misusing <br> for Layout:
Don’t use <br> to create vertical space between sections; use CSS instead.

Poor Practice:

<p>Welcome</p>
<br><br>
<p>to HTML</p>

Better Practice:

p {
  margin-bottom: 20px;
}

Not Using Semantic Tags:
Avoid using <br> where a new paragraph or section makes more sense.

Best Practices

Use CSS for Spacing:

Rely on CSS for spacing instead of multiple <br> tags. For example:

p {
  margin-bottom: 20px;
}

Avoid Overuse:
Don’t use <br> as a replacement for proper structure (e.g., <p> or <div> tags). For example:

  • Poor Practice:
<p>This is a line.<br><br>This is another line.</p>

Better Practice:

<p>This is a line.</p>
<p>This is another line.</p>
  1. Use with Semantic Elements:
    Use <br> inside elements like <p> or <address> where logical grouping is still preserved.

HTML BR

Quiz: Test Your Knowledge