The <hr> tag in HTML is used to create a horizontal rule or line that visually separates content.
- It is a self-closing tag and does not require an end tag.
- It supports both Global Attributes and Event Attributes.
<!DOCTYPE html>
<html>
<body>
<p>
There is a horizontal rule
below this paragraph.
</p>
<hr>
<p>
This is a horizontal rule
above this paragraph.
</p>
</body>
</html>
Syntax
Some Content.. <hr> Some Content..Attributes
The table below shows a few attributes that allow customization:
| Attribute Values | Value | Description |
|---|---|---|
| align | left center right | Used to specify the alignment of the horizontal rule. |
| noshade | noshade | Removes the default shading from the horizontal rule. |
| size | pixels | Specifies the thinkness of the horizontal rule. |
| width | pixels | Used to specify the width of the horizontal rule. |
Lets see how different HR Tag attributes works together in example below
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<body>
<p>
Normal horizontal line.
</p>
<hr>
<p>
Horizontal line with height
of 30 pixels
</p>
<!--Driver Code Ends-->
<hr size="30">
<p>
Horizontal line with height
of 30 pixels and noshade.
</p>
<hr size="30" noshade>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->