hr tag in html with example

Home » HTML » HTML Tags » hr tag in html with example

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The HTML <hr> tag is used for creating a horizontal rule. The <hr> element can be used to separate content in an HTML page. Most of the visual attributes for this tag have been deprecated in favor of style sheets.
In HTML, the <hr> tag has no end tag.
In XHTML, the <hr> tag must be properly closed, like this: <hr/>.
The <hr> tag is supported in all major browsers.

Example :

     <html>
     <head>
     <title>HR</title>
     </head>
     <body>
     <p>This is 20Fingers2Brains.</p>
     <hr/>
     <p>Powered by kk.</p>
     </body>
     </html>

Demo :

In the above example, we have rendered hr element between two paragraph elements. The hr tag is rendered as a horizontal line defining the partition.

HR and Style :

<html>
<head>
<title>HRStyle</title>
<style type="text/css">
hr
{
backfround-color:green;
height:15px;
}
</style>
</head>
<body>
<p>This is 20Fingers2Brains.</p>
<hr/>
<p>Powered by kk.</p>
</body>
</html>

Demo :

In the above example, we have rendered hr element. We have applied CSS to hr element using CSS class.

HR and Javascript :

<html>
<head><title>HRJavascript1</title>
<style type="text/css">
.hr
{
background-color:green;
height:15px;
}
</style>
<script type="text/javascript">
function hr()
{
document.getElementById("hr1").className="hr";
}    
</script>
</head>

<p>This is 20Fingers2Brains.</p>
<hr id="hr1"/>
<p>Powered by kk.</p>
<input type="button" id="b1" value="Press" onclick="hr()"/>
</body>
</html>

Demo :

In the above example, we have rendered a hr element, paragraph and button element. On click of button we are assigning the CSS class to hr element.