HTML <hr> Tag
In an HTML document, we can specify a paragraph-level thematic break using the HTML <hr> tag. The <hr> tag represents a Horizontal Rule in HTML. When a topic is changed abruptly in an HTML document, we can use the HTML <hr> tag to draw a horizontal line between the topics.
Example 1:
<!DOCTYPE html> <html> <body> <h1>Motivational Quote:</h1> <h3>By: Winston Churchill</h3> <p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p> <hr> <h3>By: Steve Jobs</h3> <p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p> </body> </html>
Explanation:
In the above example, we are using the HTML <hr> tag to specify a thematic break between two paragraphs.
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
h3{
border: 5px solid black;
background-color:crimson;
padding:10px;
color: white;
text-align: center;
}
p{
border: 5px solid crimson;
background-color:black;
padding:10px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1>Motivational Quote:</h1>
<hr>
<h3>By: Winston Churchill</h3>
<p>The Pessimist Sees Difficulty In Every Opportunity. The Optimist Sees Opportunity In Every Difficulty.</p>
<hr>
<h3>By: Steve Jobs</h3>
<p>If You Are Working On Something That You Really Care About, You Don’t Have To Be Pushed. The Vision Pulls You.</p>
<hr>
</body>
</html>
Explanation:
In the above example, we are using the HTML <hr> tags to specify a thematic break between two articles in an HTML document.
HTML 4.01 and HTML5:
The HTML 4.01 <hr> tag is used for a horizontal rule. The HTML 5 <hr> tag is however used for a thematic break.
HTML and XHTML:
The HTML <hr> tag does not need a closing tag. The XHTML <hr> tag however requires a closing tag.
Global Attributes:
The HTML GLobal attributes are supported by the HTML <hr> tag.
Event Attributes:
The HTML Event attributes are supported by the HTML <hr> tag.
Supporting Browsers:
Chrome, IE, Firefox, Opera, and Safari.