The <hr> tag in HTML is used to insert a
horizontal line (or horizontal rule) across the webpage.
It is a simple way to separate sections of content and improve readability.
By default, the line stretches across the page and has a basic style,
but you can customize its appearance with CSS.
The <hr> tag is an empty element
(it does not need a closing tag).
- Used to visually separate content sections.
- Default style is a thin grey line.
- Customizable using CSS (color, width, height, alignment).
Basic Example
The simplest way to use <hr> is to just place it between content.
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph after a horizontal line.</p>
This is the first paragraph.
This is the second paragraph after a horizontal line.
Customizing <hr> with CSS
The <hr> tag can be styled using CSS to change its
color, thickness, width, and alignment.
<hr style="border: 2px solid blue;">
<hr style="height: 4px; background-color: green; border: none;">
<hr style="width: 50%; margin: auto; border: 2px dashed red;">
When to Use <hr>
Horizontal lines are mainly used to separate different topics or sections in a webpage. For example, dividing an article into sections, or separating content in a resume or portfolio.
Semantic Use of <hr>
The <hr> tag isn’t just a visual line — it also represents a thematic break in content. It indicates a shift in topic, like moving from one idea to another in an article.
<h2>Chapter 1: Introduction</h2>
<p>This chapter explains the basics.</p>
<hr>
<h2>Chapter 2: Advanced Topics</h2>
<p>This chapter dives deeper into details.</p>
Chapter 1: Introduction
This chapter explains the basics.
Chapter 2: Advanced Topics
This chapter dives deeper into details.
Developers often use <hr> in:
- Separating blog post sections
- Creating a break between form sections
- Adding a line before/after signatures
- Visually dividing different content blocks
