HTML <hr> Tags


Use the <hr> tag to define a thematic change in the content:

<p>HTML is a language for describing web pages.....</p>


<p>CSS defines how to display HTML elements.....</p> 
Execute Code

Definition and Usage

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

The <hr> element is used to separate content (or define a change) in an HTML page.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element Chrome Internet Explorer Firefox Safari Opera
<hr> Yes Yes Yes Yes Yes

Differences Between HTML 4.01 and HTML5

In HTML5, the <hr> tag defines a thematic break.

In HTML 4.01, the <hr> tag represents a horizontal rule.

However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

All the layout attributes are removed in HTML5. Use CSS instead.

Differences Between HTML and XHTML

In HTML, the <hr> tag has no end tag.

In XHTML, the <hr> tag must be properly closed, like this : <hr/>.


Attribute Value Description
align left
Not supported in HTML5.
Specifies the alignment of a <hr> element
noshade noshade Not supported in HTML5.
Specifies that a <hr> element should render in one solid color (noshaded), instead of a shaded color
size pixels Not supported in HTML5.
Specifies the height of a <hr> element
width pixels
Not supported in HTML5.
Specifies the width of a <hr> element

Default CSS Settings

Most browsers will display the <hr> element with the following default values :

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;