HTML <hr> Tag

In HTML5 the <hr> tag defines a thematic change between paragraph level elements in an HTML page. In previous versions of HTML it was used to draw a horizontal line on the page visually separating the content. In HTML5 the element has semantic meaning.

Syntax

The <hr> tag is an empty element, which means that the closing tag isn’t required. But in XHTML the closing tag (</hr>) is required.

As the <hr> tag is a block-level element, all elements after it are transferred to another line. External look of the horizontal line defined by the tag depends on type of the browser. More often it is displayed with a border, which creates 3D effect.

Example

<!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 the 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>

Result

The attributes of the <hr> tag are not supported in HTML5, instead we use CSS styles.

Attributes

Attribute Value Description
align left
center
right
Defines the horizontal alignment of a line.
Not supported in HTML5.
noshade noshade Defines that the line will be displayed without 3D effect.
Not supported in HTML5.
size pixels Defines the size of a line.
Not supported in HTML5.
width pixels
%
Defines the width of a line.
Not supported in HTML5.

The <hr> tag supports the Global Attributes and the Event Attributes.

Browser support