Hero

HTML Line Break Tag Master the HTML <br> tag to force text onto a new line without starting a completely new paragraph. Learning Outcomes: Understand when and how to correctly use the <br> tag. Prerequisites: Understanding of paragraph tags. Reading Time: 3 min read Difficulty: Beginner

Introduction

Normally, when you write text inside a <p> tag, the browser decides where to wrap the text based on the width of the screen. But what if you want to force a line break at a specific point, like when writing an address or a poem? That's where the Line Break Tag (<br>) comes in.

Why This Matters

As a frontend developer building himubey.in, you might need to display your contact address or format short text snippets cleanly. The <br> tag gives you precise control over where a line of text ends, ensuring your layout looks exactly the way you intended without adding the extra spacing that comes with a new paragraph.

Core Concepts

The <br> tag stands for "Break."

• Empty Element: Like the horizontal rule, the line break is an empty tag. It contains no text and requires no closing tag.
• No Margin: Unlike starting a new <p> tag, which automatically adds vertical margin, the <br> tag simply drops the text to the very next line.

Syntax

Using the line break tag is as simple as inserting <br> wherever you want the text to break.

<p>First line of text.<br>Second line of text.</p>

Real World Example

Here is how you might format a physical address on your portfolio's contact page:

<address>
    <strong>Himanshu Dubey</strong><br>
    Frontend Educator & Developer<br>
    New Delhi, India
</address>

Best Practices

• Use for Addresses and Poems: The <br> tag is perfect for postal addresses, poetry, or any content where line divisions are meaningful.
• Do NOT use for styling: Never use multiple <br> tags to create space between elements on a page. Always use CSS margin or padding for layout spacing.

Common Mistakes

Mistake: Using <br> tags to create layout gaps.

<!-- WRONG: Using breaks for spacing -->
<h2>My Projects</h2>
<br><br>
<p>Here are some things I built.</p>

Correct Approach:

<!-- CORRECT: Using CSS for spacing -->
<h2 style="margin-bottom: 2rem;">My Projects</h2>
<p>Here are some things I built.</p>

💡 Himubey Tip

When working with JSX in React or Next.js, remember that the break tag must be self-closed like this: <br />. HTML5 is forgiving and accepts <br>, but modern JavaScript frameworks are strict!

Interview Questions

1. What is the main difference between using a <br> tag and starting a new <p> tag?
2. Why is it considered bad practice to use <br> tags for creating vertical spacing between elements?
3. Does the <br> tag require a closing tag?

Mini Challenge

Task: Format a short poem or a quote for your website.

1. Create a <p> tag.
2. Write a 3-line quote or poem.
3. Use the <br> tag to ensure each line breaks exactly where it should.

Summary

The <br> tag is an essential tool for formatting text when line breaks carry semantic meaning, such as in addresses or poems. By avoiding its use for layout spacing, you ensure your HTML remains clean, semantic, and professional.

Next Lesson

Next Lesson: HTML Anchor Tag