HR and BR Tags

HR and BR Tags

The <hr> and <br> tags are two simple but useful self-closing elements in HTML.

The <br> Tag — Line Break

The <br> tag inserts a line break within text. Unlike a paragraph, it doesn't add extra spacing — it simply moves text to the next line.

<p>
    123 Main Street<br>
    Springfield, IL 62701<br>
    United States
</p>

This renders as:

123 Main Street
Springfield, IL 62701
United States

When to Use <br>

• Addresses — street, city, country on separate lines
• Poems or lyrics — where line breaks are part of the content
• Simple spacing — when you need a new line within the same block

When NOT to Use <br>

• Don't use <br> for spacing — use CSS margin/padding instead
• Don't use multiple <br><br><br> — this is bad practice
• Don't use it between paragraphs — use separate <p> tags

The <hr> Tag — Horizontal Rule

The <hr> tag creates a horizontal line across the page. It visually separates sections of content.

<h2>Chapter 1</h2>
<p>Content of chapter 1...</p>

<hr>

<h2>Chapter 2</h2>
<p>Content of chapter 2...</p>

When to Use <hr>

• Separating sections of content on a page
• Marking a thematic break — a shift in topic
• In articles — between major sections

Styling <hr> with CSS

By default, <hr> appears as a thin gray line. You can style it:

<style>
    hr {
        border: none;
        height: 2px;
        background: linear-gradient(to right, #6c5ce7, #a78bfa);
        margin: 2rem 0;
    }
</style>

Both Tags Are Self-Closing

Neither <br> nor <hr> has a closing tag:

<br>    <!-- Correct -->
<br/>   <!-- Also correct (XHTML style) -->

<hr>    <!-- Correct -->
<hr/>   <!-- Also correct -->

Key Takeaways

• <br> creates a line break — use for addresses, poems, and inline text breaks
• <hr> creates a horizontal rule — use to separate content sections
• Both are self-closing tags (no closing tag needed)
• Don't abuse <br> for spacing — use CSS instead