HTML <hr> Tag
Concept
The <hr> tag is like a pause in a conversation or a scene change in a movie. It’s used to separate content or create a thematic break in a webpage. The tag stands for “horizontal rule,” and it typically renders as a horizontal line, providing a visual division between different sections of content.
Implementation
Example 1: Separating Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>This is the first paragraph.</p>
<hr>
<p>This is the second paragraph, separated by a horizontal line.</p>
</body>
</html>
Example 2: Dividing Sections
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<section>
<h2>Introduction</h2>
<!-- Content here -->
</section>
<hr>
<section>
<h2>Conclusion</h2>
<!-- Content here -->
</section>
</body>
</html>Try it out below:
Attributes Table
Global Attributes
The <hr> tag supports all global attributes in HTML.
Event Attributes
The <hr> tag also supports all event attributes in HTML.
Browser Support Table
| Browser | Support |
|---|---|
| Chrome | Yes |
| Firefox | Yes |
| Safari | Yes |
| Opera | Yes |
| IE | Yes |
Default CSS Settings
hr {
display: block;
height: 2px;
border: none;
background-color: grey;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
}
Conclusion
The <hr> tag is a simple yet effective way to create visual and thematic separations in your web content.
It’s like a pause that allows the reader to take a breath before moving on to the next section. While it’s a small detail, it can significantly improve the readability and structure of your webpage.