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.
Syntax:
Some Content.. <hr> Some Content..
<!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>
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 | Used to specify the bar without shading effect. |
| size | pixels | Used to specify the height 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:
<!DOCTYPE html>
<html>
<body>
<p>
Normal horizontal line.
</p>
<hr>
<p>
Horizontal line with height
of 30 pixels
</p>
<hr size="30">
<p>
Horizontal line with height
of 30 pixels and noshade.
</p>
<hr size="30" noshade>
</body>
</html>
Output:
