HTML <hr> Tag
Last Updated :
01 Mar, 2024
HTML <hr> tag is a simple yet essential element used to insert a horizontal rule or a thematic break in an HTML page. It serves to divide or separate different sections of a document. <hr> tag in HTML stands for horizontal rule. The <hr> tag is an empty tag, and it does not require an end tag. The primary purpose of the <hr>
 tag is to create a visual separation between content sections within an HTML page.
Attributes
While the <hr>
 tag itself doesn’t have much complexity, it supports a few attributes that allow customization:
Attribute Values |
Value |
Description |
align |
left centre 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. |
Example 1: Basic Usage
In this example we will see the implementation of the <hr> tag in HTML:
HTML
<!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 >
|
Output:Â
Example 2:Â Customization
In this example we will see the implementation of the <hr> tag with some attribute in HTMLÂ
HTML
<!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:Â
Note: The <hr>
 tag also supports the Global Attributes and Event Attributes in HTML
By strategically using the <hr>
 tag, you can enhance the readability and organization of your web content. Remember to consider the context and aesthetics of your page when incorporating horizontal rules.
Supported Browsers:Â
Share your thoughts in the comments
Please Login to comment...