The
<hr>tag in HTML defines a thematic break between paragraph-level elements.
It is typically displayed as a horizontal line and is used to visually separate content or sections within a page.
In HTML5, it represents a semantic break rather than just a visual divider.
Syntax
<hr>Attributes
| Attribute | Description |
|---|---|
class | Assigns one or more class names for styling. |
id | Assigns a unique identifier to the horizontal rule. |
style | Adds inline CSS styles (e.g., color, width, height). |
title | Provides additional information as a tooltip. |
Example
<!DOCTYPE html>
<html>
<head>
<title>HR Tag Example</title>
<style>
.styled-hr {
border: 0;
height: 4px;
background: linear-gradient(to right, #29AB87, #2ecc71);
border-radius: 2px;
}
</style>
</head>
<body>
<h1>Horizontal Rule Example</h1>
<p>This is the first section of text.</p>
<!-- Horizontal line separating sections -->
<hr class="styled-hr" title="Section Break">
<p>This is the second section of text after the horizontal rule.</p>
</body>
</html>Output
Browser Output
Use our TryIt Editor to see the output.
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
The <hr> tag is rendered as a horizontal line that separates sections of content.
Its appearance can be customized using CSS for color, thickness, and style.
Notes
- The
<hr>tag is self-closing; it does not require an end tag. - It can be styled with CSS to match your website’s design (e.g., gradient lines, dashed styles).
- In HTML5,
<hr>indicates a semantic thematic break, not just a visual one. - It helps improve content readability by visually dividing topics or sections.
Conclusion
The <hr> tag adds a horizontal divider to web pages to separate content sections visually and semantically.
It’s a simple yet effective way to improve structure and readability in web design.
