HTML br Tag: A Step-by-Step Guide

What is the br Tag?

Introduction: Why the HTML <br> Tag Is Used

When writing content on a webpage, you sometimes need to break a line without starting a new paragraph.

Examples:

  • Addresses

  • Poems

  • Song lyrics

  • Short line breaks in text

For these cases, HTML provides the <br> tag.

However, many beginners overuse <br>, which leads to messy and unprofessional HTML.
This guide explains the <br> tag clearly, with correct usage, examples, and best practices.

What Is the HTML br Tag?

The HTML <br> tag inserts a single line break.

👉 In simple words:
It moves the text to the next line without adding extra spacing like a paragraph.

Basic Syntax of the <br> Tag

<br>

Key Points

  • <br> is an empty (self-closing) tag

  • It does not need a closing tag

  • It creates a new line

Example 1: Simple Line Break

<p>Hello<br>World</p>

Output Explanation

  • “Hello” appears on one line

  • “World” appears on the next line

  • Both are part of the same paragraph

Correct Use Cases for br Tag

Use <br> when:

  • Line breaks are part of the content itself

  • You do not want paragraph spacing

Example 2: Address Format

<p>
  Arvinder Kaur<br>
  Sector 22<br>
  Chandigarh<br>
  India
</p>

Example 3: Poem or Lyrics

<p>
  Roses are red,<br>
  Violets are blue,<br>
  HTML is easy,<br>
  And fun too!
</p>

Incorrect Use of <br> (Avoid This)

❌ Using <br> to create space between paragraphs:

 
This is paragraph one.<br><br><br> This is paragraph two.

👉 This is bad practice.

Correct Alternative: Use <p> Instead

 
<p>This is paragraph one.</p> <p>This is paragraph two.</p>

br vs p (Important Difference)

Feature<br><p>
PurposeLine breakParagraph
SpacingNo extra spacingAdds spacing
Semantic meaning❌ No✅ Yes
Use caseAddress, poemContent text

Use <br> for line breaks, <p> for paragraphs.

<br> vs CSS (Modern Best Practice)

❌ Do not use <br> for layout or spacing
✅ Use CSS margins and padding instead

Example (CSS Spacing)

 
p { margin-bottom: 20px; }

HTML br Tag in HTML5

  • <br> is valid and supported

  • <br /> (self-closing slash) is optional in HTML5

  • Recommended syntax:   <br>

Common Beginner Mistakes

  • Using <br> to create vertical space
  •  Using many <br> tags together
  •  Replacing paragraphs with <br>
  •  Mixing <br> with layout elements
  •  Ignoring semantic HTML

Best Practices for Using br Tag

  • Use <br> only for content-based line breaks
  • Avoid multiple <br> tags
  • Use <p> for paragraphs
  •  Use CSS for spacing
  •  Keep HTML semantic and clean

Real-World Example

<h2>Contact Information</h2>
<p>
  Email: contact@example.com<br>
  Phone: +91 98765 43210<br>
  Office Hours: 9 AM – 5 PM
</p>

FAQs: HTML br Tag

What does the <br> tag do?

It inserts a line break.

Is <br> deprecated?

No, it is valid in HTML5.

Should I use <br> for spacing?

No. Use CSS or paragraph tags.

Does <br> affect SEO?

No direct SEO impact.

Can I close <br>?

No closing tag is required.