Sometimes you need to break text onto a new line within a paragraph, or add a visual separator between sections. HTML provides two simple but powerful elements for these tasks: <br> for line breaks and <hr> for horizontal rules. Let's learn when and how to use them effectively.
Line Breaks: The BR Element
The <br> element creates a line break within text. It forces text to continue on the next line without starting a new paragraph.
BR Syntax
The <br> element is a void element (also called a self-closing tag), meaning it doesn't have a closing tag:
MARKUP
<!-- Modern HTML5 syntax (recommended) -->
<br>
<!-- Legacy XHTML syntax (also valid) -->
<br />š” Tip:
In HTML5, the trailing slash is optional. Both <br> and <br /> are valid, but <br> is more common in modern code.
Basic Line Break Usage
MARKUP
<p>
This is the first line.<br>
This is the second line.<br>
This is the third line.
</p>This displays as:
This is the first line.
This is the second line.
This is the third line.
When to Use Line Breaks
Line breaks should be used sparingly and only in specific situations:
1. Addresses
MARKUP
<address>
John Doe<br>
123 Main Street<br>
Apartment 4B<br>
New York, NY 10001<br>
United States
</address>2. Poems and Lyrics
MARKUP
<p>
Roses are red,<br>
Violets are blue,<br>
HTML is awesome,<br>
And so are you!
</p>3. Contact Information
MARKUP
<p>
<strong>Customer Service</strong><br>
Email: support@example.com<br>
Phone: (555) 123-4567<br>
Hours: Mon-Fri 9am-5pm EST
</p>4. Signatures
MARKUP
<p>
Best regards,<br>
John Doe<br>
Web Developer<br>
Example Company
</p>5. Within Table Cells
MARKUP
<table>
<tr>
<td>
Product Name<br>
SKU: 12345<br>
$29.99
</td>
</tr>
</table>When NOT to Use Line Breaks
Don't use <br> elements for:
1. Creating Spacing Between Paragraphs (Use Paragraphs Instead)
MARKUP
<!-- WRONG: Using br for paragraph separation -->
This is the first paragraph.<br><br>
This is the second paragraph.<br><br>
This is the third paragraph.
<!-- CORRECT: Use proper paragraph elements -->
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the third paragraph.</p>2. Creating Vertical Spacing (Use CSS Instead)
MARKUP
<!-- WRONG: Using br for spacing -->
<h2>Section Title</h2>
<br><br><br>
<p>Content with lots of space above</p>
<!-- CORRECT: Use CSS margins -->
<h2>Section Title</h2>
<p style="margin-top: 3rem;">Content with space above</p>
<!-- BETTER: Use CSS classes -->
<style>
.spaced {
margin-top: 3rem;
}
</style>
<h2>Section Title</h2>
<p class="spaced">Content with space above</p>3. Creating Lists (Use List Elements Instead)
MARKUP
<!-- WRONG: Using br to make lists -->
Shopping List:<br>
- Apples<br>
- Bread<br>
- Milk<br>
<!-- CORRECT: Use proper list elements -->
<p>Shopping List:</p>
<ul>
<li>Apples</li>
<li>Bread</li>
<li>Milk</li>
</ul>š« Important Rule:
If you find yourself using multiple <br> tags in a row (<br><br>), you're probably doing something wrong. Use proper semantic elements or CSS instead.
Horizontal Rules: The HR Element
The <hr> element represents a thematic break or transition between content. It typically displays as a horizontal line.
HR Syntax
Like <br>, the <hr> is a void element:
MARKUP
<!-- Modern HTML5 syntax (recommended) -->
<hr>
<!-- Legacy XHTML syntax (also valid) -->
<hr />Basic Horizontal Rule Usage
MARKUP
<p>This is some content above the line.</p>
<hr>
<p>This is some content below the line.</p>This displays as:
This is some content above the line.
This is some content below the line.
When to Use Horizontal Rules
1. Thematic Breaks Between Sections
MARKUP
<article>
<h1>Chapter One: The Beginning</h1>
<p>Once upon a time...</p>
<p>The story continues...</p>
<hr>
<h1>Chapter Two: The Journey</h1>
<p>The next day...</p>
</article>2. Separating Different Topics
MARKUP
<section>
<h2>Product Description</h2>
<p>This product is amazing...</p>
<hr>
<h2>Customer Reviews</h2>
<p>ā
ā
ā
ā
ā
"Great product!"</p>
</section>3. Within Articles for Scene Changes
MARKUP
<article>
<p>Sarah walked into the room...</p>
<p>Everything was quiet.</p>
<hr>
<p>Meanwhile, across town...</p>
<p>Tom was having a completely different experience.</p>
</article>4. In Comment Sections
MARKUP
<div class="comment">
<p><strong>User1:</strong> Great article!</p>
</div>
<hr>
<div class="comment">
<p><strong>User2:</strong> I agree, very helpful.</p>
</div>
<hr>
<div class="comment">
<p><strong>User3:</strong> Thanks for sharing!</p>
</div>Semantic Meaning of HR
In HTML5, <hr> has a semantic meaning beyond just visual appearance. It represents a thematic break at the paragraph level.
MARKUP
<!-- Good: Represents a thematic shift -->
<section>
<p>We discussed the problem in detail.</p>
<p>Everyone agreed on the severity of the issue.</p>
<hr>
<p>The solution, however, was more complex.</p>
<p>We needed to consider multiple approaches.</p>
</section>When NOT to Use Horizontal Rules
1. For Page Layout (Use CSS Borders Instead)
MARKUP
<!-- WRONG: Using hr for visual design -->
<div class="header">
<h1>Site Title</h1>
</div>
<hr>
<div class="content">
Content here
</div>
<hr>
<div class="footer">
Footer here
</div>
<!-- BETTER: Use CSS borders -->
<style>
.header {
border-bottom: 1px solid #ccc;
padding-bottom: 1rem;
}
.footer {
border-top: 1px solid #ccc;
padding-top: 1rem;
}
</style>
<div class="header">
<h1>Site Title</h1>
</div>
<div class="content">
Content here
</div>
<div class="footer">
Footer here
</div>2. Within Lists
MARKUP
<!-- AVOID: hr between list items -->
<ul>
<li>Item 1</li>
<hr>
<li>Item 2</li>
<hr>
<li>Item 3</li>
</ul>
<!-- BETTER: Style list items with CSS -->
<style>
.separated-list li {
border-bottom: 1px solid #ccc;
padding: 0.5rem 0;
}
.separated-list li:last-child {
border-bottom: none;
}
</style>
<ul class="separated-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Styling Line Breaks and Horizontal Rules
Styling BR Elements
You can't directly style <br> elements much, but you can control the line height of their containing element:
MARKUP
<style>
.tight-spacing {
line-height: 1.2;
}
.loose-spacing {
line-height: 2;
}
</style>
<p class="tight-spacing">
Line 1<br>
Line 2<br>
Line 3
</p>
<p class="loose-spacing">
Line 1<br>
Line 2<br>
Line 3
</p>Styling HR Elements
Horizontal rules can be extensively customized with CSS:
MARKUP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Styled HR Examples</title>
<style>
/* Default reset */
hr {
border: none;
margin: 2rem 0;
}
/* Simple solid line */
hr.solid {
border-top: 2px solid #333;
}
/* Dashed line */
hr.dashed {
border-top: 2px dashed #999;
}
/* Dotted line */
hr.dotted {
border-top: 3px dotted #666;
}
/* Thick colored line */
hr.thick {
border-top: 5px solid #3498db;
}
/* Gradient line */
hr.gradient {
height: 3px;
background: linear-gradient(to right, #3498db, #e74c3c);
}
/* Centered short line */
hr.short {
width: 50%;
margin-left: auto;
margin-right: auto;
border-top: 2px solid #333;
}
/* Decorative line with shadow */
hr.shadow {
border: none;
height: 1px;
background: #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
/* Double line */
hr.double {
border-top: 3px double #666;
}
/* Line with text */
hr.with-text {
position: relative;
border: none;
border-top: 1px solid #ccc;
}
hr.with-text::after {
content: "OR";
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 0 10px;
color: #999;
}
</style>
</head>
<body>
<p>Content above</p>
<hr class="solid">
<p>Content below solid line</p>
<hr class="dashed">
<p>Content below dashed line</p>
<hr class="gradient">
<p>Content below gradient line</p>
<hr class="short">
<p>Content below short centered line</p>
<hr class="with-text">
<p>Content below line with text</p>
</body>
</html>Accessibility Considerations
Line Breaks and Accessibility
Screen readers typically announce line breaks, but excessive use can be annoying:
MARKUP
<!-- POOR: Too many breaks, annoying for screen readers -->
<p>
Item 1<br>
Item 2<br>
Item 3<br>
Item 4<br>
Item 5
</p>
<!-- BETTER: Use a list for screen reader users -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>Horizontal Rules and Accessibility
Screen readers announce horizontal rules differently depending on the reader. You can add ARIA attributes for clarity:
MARKUP
<!-- Basic hr -->
<hr>
<!-- hr with descriptive role -->
<hr role="separator" aria-label="End of section">
<!-- hr that shouldn't be announced -->
<hr role="presentation">Complete Example: Blog Post
blog-post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Make Coffee</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
hr {
border: none;
border-top: 2px solid #ddd;
margin: 2rem 0;
}
.author-bio {
background: #f9f9f9;
padding: 1rem;
border-left: 4px solid #3498db;
margin-top: 2rem;
}
address {
font-style: normal;
}
</style>
</head>
<body>
<article>
<header>
<h1>The Perfect Cup of Coffee</h1>
<p>
<time datetime="2024-01-15">January 15, 2024</time> by
<span class="author">Jane Smith</span>
</p>
</header>
<p>
Making great coffee at home doesn't have to be complicated.
Follow these simple steps for a delicious brew every time.
</p>
<hr>
<section>
<h2>What You'll Need</h2>
<ul>
<li>Fresh coffee beans</li>
<li>Coffee grinder</li>
<li>Coffee maker or French press</li>
<li>Filtered water</li>
</ul>
</section>
<hr>
<section>
<h2>Instructions</h2>
<ol>
<li>Grind your coffee beans to a medium-coarse consistency</li>
<li>Use 2 tablespoons of coffee per 6 ounces of water</li>
<li>Heat water to 195-205Ā°F (90-96Ā°C)</li>
<li>Pour water over grounds and let steep for 4 minutes</li>
<li>Enjoy your perfect cup!</li>
</ol>
</section>
<hr>
<section>
<h2>Pro Tips</h2>
<p>
For best results, always use freshly roasted beans within
two weeks of the roast date. Store beans in an airtight
container away from light and heat.
</p>
<p>
The water temperature is crucial. Too hot, and you'll
extract bitter flavors. Too cold, and your coffee will
taste weak.
</p>
</section>
<hr>
<footer>
<div class="author-bio">
<h3>About the Author</h3>
<p>
Jane Smith is a certified coffee specialist with over
10 years of experience in the coffee industry.
</p>
<address>
Contact Jane:<br>
Email: jane@example.com<br>
Twitter: @janesmithcoffee<br>
Instagram: @coffeewithj ane
</address>
</div>
</footer>
</article>
</body>
</html>Common Mistakes
Mistake 1: Using BR for Vertical Spacing
MARKUP
<!-- WRONG: Multiple br tags for spacing -->
<h2>Section Title</h2>
<br><br><br><br>
<p>Content far below</p>
<!-- CORRECT: Use CSS -->
<h2>Section Title</h2>
<p style="margin-top: 4rem;">Content far below</p>Mistake 2: Using HR Purely for Decoration
MARKUP
<!-- QUESTIONABLE: hr without thematic meaning -->
<div class="card">
<h3>Card Title</h3>
<hr>
<p>Card content</p>
</div>
<!-- BETTER: Use CSS border -->
<style>
.card h3 {
border-bottom: 1px solid #ccc;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
</style>
<div class="card">
<h3>Card Title</h3>
<p>Card content</p>
</div>Mistake 3: Adding Closing Tags
MARKUP
<!-- WRONG: br and hr don't have closing tags -->
<br></br>
<hr></hr>
<!-- CORRECT: They are void elements -->
<br>
<hr>Mistake 4: Using BR to Make Lists
MARKUP
<!-- WRONG: br for list items -->
<p>
Todo:<br>
- Buy milk<br>
- Walk dog<br>
- Call mom
</p>
<!-- CORRECT: Use list elements -->
<p>Todo:</p>
<ul>
<li>Buy milk</li>
<li>Walk dog</li>
<li>Call mom</li>
</ul>BR vs HR: Quick Comparison
| Feature | BR Element | HR Element |
|---|---|---|
| Purpose | Create line break within text | Create thematic break between content |
| Visual Result | New line (no visual separator) | Horizontal line |
| Element Type | Void element | Void element |
| Semantic Meaning | Line break (minimal semantics) | Thematic break (strong semantics) |
| Common Use | Addresses, poems, contact info | Section transitions, scene changes |
| Styling Options | Limited (parent's line-height) | Extensive (border, color, size, etc.) |
Key Takeaways
<br>creates a line break within text<hr>creates a thematic break with a horizontal line- Both are void elements (no closing tags)
- Use
<br>for addresses, poems, and contact info - Don't use multiple
<br>tags for spacing - Use
<hr>for thematic transitions between sections <hr>has semantic meaning beyond visual appearance- Don't use
<hr>purely for layout decoration - Both elements can be styled with CSS
- Consider accessibility when using these elements
- Prefer semantic HTML (paragraphs, lists) over excessive breaks
- Use CSS for spacing and visual design, not
<br>or<hr>
What's Next?
Now that you know how to control line breaks and create visual separators, we'll explore Text Formatting. You'll learn how to make text bold, italic, underlined, and more using HTML's text formatting elements like <strong>, <em>, <mark>, and others. These elements add emphasis and meaning to your text content!