HTML br Tag: A Step-by-Step Guide

What is the br Tag?

The HTML   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

Creates a single line break in text.
Does not require a closing tag.
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   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   for Layout:
Don’t use   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   where a new paragraph or section makes more sense.

Best Practices

Use CSS for Spacing:

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

p {
  margin-bottom: 20px;
}

Avoid Overuse:

Avoid Overuse:
Don’t use   as a replacement for proper structure (e.g.,  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>

Use with Semantic Elements:

Use with Semantic Elements:
Use   inside elements like  or <address> where logical grouping is still preserved.

[WpProQuiz 42]