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:
<!DOCTYPE html> < html >
< body >
< p >
There is a horizontal rule below this paragraph.
</ p >
<!--HTML hr tag is used here-->
< 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
<!DOCTYPE html> < html >
< body >
< p >
Normal horizontal line.
</ p >
<!--HTML hr tag is used here-->
< 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.