Articles → HTML → Hr Tag In HTML

Hr Tag In HTML

In this tutorial, we will discuss HR (horizontal rule) tags in HTML.

Purpose

The purpose of the HR tag is to create a horizontal line.

Syntax

<hr />

Example

<html>
<head>
    <title>hr demo</title>
</head>
<body>
    <hr />
</body>
</html>

Try It

Output

Click to Enlarge

Attributes

We will talk about 4 attributes

Attribute Name	Value	Description
Align	left, right and center	Specifies the alignment of the horizontal line
Noshade		Removes shading from the horizontal line
Size	Pixels or %	Specifies the height of the horizontal line.
Width	Pixels or %	Specifies the width of the horizontal line.

Initially, we will talk about "noshade" attribute and then we will talk about the other 3 attributes. First, add "noshade" in the HR tag. So, the existing code will be: -

<html>
<head>
    <title>hr demo</title>
</head>
<body>    
    <hr noshade />
</body>
</html>

Try It

And the output will be: -

Picture showing the output of hr tag in html with noshade attribute

Click to Enlarge

Remove "noshade" from the HR tag and add the other three attributes, so the code is changed to: -

<html>
<head>
    <title>hr demo</title>
</head>
<body>
    <hr size="10" width="200" align="center" />
</body>
</html>

Try It

And the output will be: -

Picture showing the output of hr tag in html with height,width and align attibute

Click to Enlarge

Browser Support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
Yes	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Wednesday, October 5, 2016

Updated On -	Saturday, September 16, 2017

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**