HTML <hr> Tag – Horizontal Rule (Separator)
📌 Introduction
The <hr> tag is used to create a horizontal line in HTML.
It is used to visually separate content sections on a webpage.
Like <br>, it is a self-closing tag (no closing tag needed).
🧱 Syntax
<hr />
or:
<hr />
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>HR Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the first section.</p>
<hr />
<p>This is the second section.</p>
</body>
</html>
🖥️ Output Explanation
The page will show:
- First section
- A horizontal line
- Second section
✔ The <hr> visually separates content
🎯 When to Use <hr>
Use <hr> to:
- Separate topics or sections
- Divide blog posts
- Break content into logical parts
- Improve readability
Example:
<h2>Introduction</h2>
<p>Welcome to my blog.</p>
<hr />
<h2>Conclusion</h2>
<p>Thanks for reading.</p>
⚠️ Important Note
👉 <hr> is NOT just a visual line
It actually represents a thematic break in content (semantic meaning).
🎨 Styling <hr> with CSS
You can customize it:
<hr style="border: 1px solid black; width: 50%;" />
✔ You can change:
- Color
- Thickness
- Width
🚫 Common Mistakes
- Using
<hr>for decoration only ❌ - Overusing it everywhere ❌
- Thinking it adds spacing (it doesn’t, it’s a separator) ❌
🧪 Mini Exercise
Create a page with:
- A title section
- A horizontal line
- A content section
- Another horizontal line
- A footer section
👉 Try to organize it like a real article