How to Add Horizontal Rule to Your Webpage

What is Horizontal Rule Tag in HTML

The horizontal rule tag or <hr> tag, is an HTML element used to create a horizontal line across the width of a web page. It is typically used to separate content sections, such as between two paragraphs or headings. The horizontal rule tag is a self-closing tag, which means it does not require a closing tag.

Video Explanation

Click the button below to watch the explanation.

Hindi Hide Video

Please wait while the video is loading....

The syntax for the horizontal rule tag is straightforward. You need to use <hr> at the point where you want to insert a horizontal line on your web page.

Here's an example of how to use <hr> tag in HTML:

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>Horizontal Rule Tag Example</title>
</head>

<body>
	<p>This is first paragraph of text.</p>
    <hr>
    <p>This is second paragraph of text.</p>
    <hr>
    <p>This is third paragraph of text.</p>
</body>

</html>

Attributes of Horizontal Rule Tag

Here are the attributes we can use with the horizontal rule tag:

• color
• size
• width
• align

color

This color attribute can be used to set a color for the hr tag.

<hr color="red">

size

This size attribute can be used to increase the height of the hr tag. The value of the size attribute is defined in pixels.

<hr color="red" size="8">

width

This width attribute can be used to adjust the width of the hr tag. The value of the width attribute is defined in pixels.

<hr color="red" size="8" width="400">

align

The align attribute can be used to align an hr tag horizontally left, right or center on the webpage. The default value of align attribute for hr tag is center.

<hr color="red" size="8" width="200">
<hr color="green" size="8" width="200" align="left">
<hr color="blue" size="8" width="200" align="right">