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 | 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 »
