Home » HTML » HTML Horizontal line

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.

Example of HR tag in HTML Try this code »

<!DOCTYPE html>
<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 hr Tag Examples

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

Element
Microsoft Edge browser.png Edge
Chrome browser.png Chrome
Firefox browser.png Firefox
Opera browser.png Opera
safari browser.png Safari
<hr>
Yes
Yes
Yes
Yes
Yes