HR tag in HTML
The HR tag in HTML specifies a thematic break in the webpage. It separates the paragraph-level elements by a visible horizontal line. It is an unpaired tag.
When you insert HR tag in HTML, the browser displays a line in its position. It is called thematic break, that means, change in topic or, in other words, change in theme.
You can observe in our tutorials also, when we move from one heading to another, we use hr tag between them. It is due to change of topic.
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML hr Tag </title>
</head>
<body>
<h2> HTML </h2>
<p> HTML is a language for describing web pages. </p>
<hr>
<h2> HR Tag </h2>
<p> HR tag is used to draw a horizontal line. <p>
</body>
</html>
Output
HTML
HTML is a language for describing web pages.
HR Tag
HR tag is used to draw a horizontal line.
Styling of HR tag in HTML
The HR tag supports some global attributes through which you can change its styling a little bit. The attributes define color, size, alignment, etc. Let's see them one by one:
- align: The align attributes has values
align=left/center/right. It horizontally aligns the position of hr line on the webpage. It only works when the line's width is smaller than its parent container. - color: It specifies a color for the hr tag's line.
- size: Size is just the height of the line in pixels. At first it is only a thin line, but with this property you can increase its size. You can also specify its fill type using shade attribute.
- noshade: It is a boolean value. The default value of hr tag is the shade fill. If you specify
noshade, then only a solid grey colored line will display. It won't have any effect if you have specified a color for the line. - width: It sets the width of the line. By default, the hr tag occupies 100% width of its parent element.
Note: All these attributes are deprecated in HTML5. It is recommended to use CSS for styling HR tag in new websites.
Browser Support
 Edge |
 Chrome |
 Firefox |
 Opera |
 Safari |
|
|---|---|---|---|---|---|
<hr> |