HTML <hr> Tag
The HTML <hr> tag is a block-level element that represents a thematic break in an HTML document. The visual appearance of the horizontal line depends on the browser. It is often displayed with a border that creates a 3D effect.
In HTML5, the <hr> tag defines a thematic break between paragraph-level elements. In previous HTML versions, it was used to draw a horizontal line that visually separated content. In HTML5, it carries semantic meaning.
Syntax
The <hr> tag is empty, which means that the closing tag isn’t required. But in XHTML, the (<hr>) tag must be closed (<hr/>).
Example of the HTML <hr> tag:
HTML hr tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Learn HTML</h1>
<p>
This HTML tutorial will teach you the basics of the (Hyper Text Markup Language) and how to make your website from scratch.
</p>
<hr />
<h1>Learn CSS</h1>
<p>
In our CSS tutorial you will learn how to use CSS to control the style and layout of multiple Web pages all at once.
</p>
</body>
</html>HTML <hr> Size Attribute
The size attribute specifies the height of the line.
DANGER
Though the size attribute is one of the deprecated attributes, it is still supported in all browsers.
Example of the HTML <hr> tag with the "size" attribute:
hr tag size attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a height of 40 pixels:</p>
<hr size="40" />
</body>
</html>TIP
An alternate way to specify the size of the <hr> tag is using CSS height Property.
Example of the HTML <hr> tag used with the height property:
hr tag with CSS width property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
height: 20px;
}
</style>
</head>
<body>
<p>
A horizontal line with a height of 20 pixels.
</p>
<hr />
</body>
</html>HTML <hr> Width Attribute
The width attribute specifies the width of the line.
DANGER
The width attribute is also from the list of deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the width attribute:
hr tag width attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>A normal horizontal line:</p>
<hr />
<p>A horizontal line with a width of 30%:</p>
<hr width="30%" />
</body>
</html>TIP
Use CSS width Property instead of the width attribute.
Example of the HTML <hr> tag used with the width property:
hr tag with CSS width property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 250px;
}
</style>
</head>
<body>
<p>A horizontal line with a width of 250 pixels:</p>
<hr />
</body>
</html>HTML <hr> Noshade Attribute
The noshade attribute removes the 3D shading effect from the horizontal line.
DANGER
The noshade attribute is one of the deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the noshade attribute:
hr tag with noshade attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Shaded horizontal line :</p>
<hr />
<p>Noshaded horizontal line:</p>
<hr noshade />
</body>
</html>TIP
An alternate way to accomplish noshade effect is to use CSS border Property.
Example of the HTML <hr> tag used with the border property:
hr tag with CSS border property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
border: 1px solid #000000;
background: transparent;
}
</style>
</head>
<body>
<p>
A horizontal line specified with CSS border Property.
</p>
<hr />
</body>
</html>HTML align Attribute
The align attribute specifies the alignment of the line.
DANGER
The align attribute is one of the deprecated attributes, but is supported in all browsers.
Example of the HTML <hr> tag with the align attribute:
hr tag align attribute
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<hr align="left" width="70%" />
</body>
</html>TIP
Use the CSS text-align Property instead of <hr> align attribute.
Example of the HTML <hr> tag used with the margin property:
hr tag with CSS margin property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
hr {
width: 50%;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<p>A horizontal line specified with CSS margin property</p>
<hr />
</body>
</html>DANGER
The presentation attributes of the <hr> tag are deprecated in HTML5. For styling, we use CSS instead.
How to Style <hr> Tag
CSS border property is used to style the horizontal line.
Example of the HTML <hr> tag styled with the border property:
hr tag with CSS border property
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
/* blue border */
hr.one {
border-top: 1px solid #1c87c9;
}
/* Dashed border */
hr.two {
border-top: 1px dashed #1c87c9;
}
/* Dotted border */
hr.three {
border-top: 1px dotted #1c87c9;
}
/* Thick border */
hr.four {
border: 1px solid #1c87c9;
}
/* Large rounded border */
hr.five {
border: 15px solid #1c87c9;
border-radius: 5px;
}
</style>
</head>
<body>
<p>Default:</p>
<hr />
<p>Styling "hr" tag</p>
<hr class="one" />
<hr class="two" />
<hr class="three" />
<hr class="four" />
<hr class="five" />
</body>
</html>Attributes
| Attribute | Value | Description |
|---|---|---|
| align | left center right | Defines the horizontal alignment of a line. Deprecated in HTML5, but still supported by browsers for backward compatibility. |
| noshade | noshade | Defines that the line will be displayed without 3D effect. Deprecated in HTML5, but still supported by browsers for backward compatibility. |
| size | pixels | Defines the size of a line. Deprecated in HTML5, but still supported by browsers for backward compatibility. |
| width | pixels % | Defines the width of a line. Deprecated in HTML5, but still supported by browsers for backward compatibility. |
The <hr> tag supports the Global Attributes and the Event Attributes.
Practice
What does the HTML <hr> tag do?