HTML <hr> Tag
The HTML <hr> tag represents a thematic break between content sections. It's typically displayed as a horizontal rule, although its appearance can be styled with CSS. Unlike other semantic elements, the <hr> tag does not denote a structural element of a page rather it is a way to divide content, creating visual separation between topics or ideas. It is a void element, meaning it does not have a closing tag.
Syntax
<hr>
The <hr> tag doesn't typically take content between opening and closing tags as it's a void element. While it historically had attributes for styling, these are now considered deprecated, and styling should be handled using CSS.
Attributes
| Attribute | Value | Description |
|---|---|---|
| (None) | The <hr> tag does not have any specific attributes in HTML5. Use CSS for styling. Deprecated attributes from older HTML versions include align, color, noshade, and size, width but should be avoided. |
Example
<!DOCTYPE html>
<html>
<head>
<title>HR Tag Example</title>
</head>
<body>
<h1>First Section</h1>
<p>This is the content of the first section.</p>
<hr>
<h2>Second Section</h2>
<p>This is the content of the second section.</p>
</body>
</html>
More Examples
Styling with CSS:
While the default appearance of an <hr> is a simple horizontal line, you can customize it using CSS.
<!DOCTYPE html>
<html>
<head>
<title>HR Tag Styling</title>
<style>
hr {
border: 2px solid #007bff; /* Blue border */
margin: 20px 0;
width: 80%; /* Setting width */
}
</style>
</head>
<body>
<h1>Section 1</h1>
<p>Content of section 1.</p>
<hr>
<h2>Section 2</h2>
<p>Content of section 2.</p>
</body>
</html>
Creating a Dotted Separator:
You can achieve different styles beyond just a solid line.
<!DOCTYPE html>
<html>
<head>
<title>Dotted HR Tag Example</title>
<style>
hr {
border: none;
border-top: 2px dotted #ccc; /* Dotted gray border */
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Section A</h1>
<p>Content of section A.</p>
<hr>
<h2>Section B</h2>
<p>Content of section B.</p>
</body>
</html>
Using hr for a timeline:
The horizontal rule can be styled to create a visual timeline effect
<!DOCTYPE html>
<html>
<head>
<title>Timeline Using hr</title>
<style>
.timeline-container {
width: 80%;
margin: 20px auto;
position: relative;
}
.timeline-container hr {
border: none;
border-top: 2px solid #ccc;
margin: 20px 0;
}
.timeline-event{
position: absolute;
top: -10px;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
}
.timeline-event.event-1{
left: 10%;
}
.timeline-event.event-2{
left: 40%;
}
.timeline-event.event-3{
left: 75%;
}
.timeline-event.event-4{
left: 90%;
}
</style>
</head>
<body>
<div class="timeline-container">
<hr>
<div class="timeline-event event-1"></div>
<div class="timeline-event event-2"></div>
<div class="timeline-event event-3"></div>
<div class="timeline-event event-4"></div>
</div>
</body>
</html>
Browser Support
The <hr> tag is supported by all major browsers, including:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use
<hr>tags for thematic breaks, indicating a transition between different sections of content. - Avoid using
<hr>for purely presentational purposes; use CSS borders and margins for stylistic spacing. - The
<hr>element has become more of a semantical element than visual seperator, use it to showcase the logical division of the content. - Do not rely on the default styling of
<hr>; instead, use CSS to ensure a consistent look across different browsers and devices. - Deprecated attributes like
align,color,noshade,size, andwidthshould not be used. Use CSS for all styling aspects. - Consider the context in which you are using
<hr>. It should represent a significant break in the flow of content, not just arbitrary divisions.
