Latest web development tutorials
 

HTML <hr> Tag


Example

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

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

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
Try it Yourself »

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

Element
<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 />.


Attributes

Attribute Value Description
align left
center
right
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

Global Attributes

The <hr> tag also supports the Global Attributes in HTML.


Event Attributes

The <hr> tag also supports the Event Attributes in HTML.


Related Pages

HTML DOM reference: HR Object


Default CSS Settings

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

Example

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