HTML hr tag

HTML <hr> tag

Use of <hr> tag

The <hr> tag defines a horizontal rule which makes thematic break between the paragraph level element in a webpage. In another term, it is used to change the topic or content of a section in a webpage by rendering a horizontal line. The horizontal line is mostly displayed with a border around it which makes 3D effect. No doubt, you can make better rich effect with CSS. (See example)
It is easy to use this tag for styling like for producing a horizontal line simply, but thats not a good idea. Use this tag according to the semantic term instead of visual term.

Characteristics of <hr> tag

1. It is found to be present within the <body> section.
2. It is block-level element and hence all other HTML elements will start in a new line.
3. It is an empty element which means the end tag (</hr>) is not required. But in XHTML5, the end tag is necessary like <hr />.
4. It supports both global and event attribute.

Default CSS properties of <hr> tag

hr {
display:block;
margin:0.5em auto;
border-style:inset;
border-width:1px;
}

Example of <hr> tag

    <h3> HTML </h3>
    <p>It is used for making webpages.</p>
    <hr>
    <h3> CSS </h3>
    <p>It is used to style the HTML elements.</p>

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<hr> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
    <h3> HTML </h3>
    <p>It is used for making webpages.</p>
    <hr>
    <h3> CSS </h3>
    <p>It is used to style the HTML elements.</p>
</p>
</body>
</html>

Output

HTML

It is used for making webpages.


CSS

It is used to style the HTML elements.

Attributes of <hr> tag

Attribute Value Notes
align left
right
center
It defines the alignment of <hr> element.
color colorname
rgb(value,value,value)
#xxxxxx
It defines the color of the rendered horizontal line.
noshade noshade It defines that the rendered line should be in one solid color instead of a shaded color.
size pixels It defines the height of <hr> element.
width pixels
%
It defines the width of <hr> element.