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 »
More "Try it Yourself" examples below.
Definition and Usage
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <hr> | Yes | Yes | Yes | Yes | Yes |
Global Attributes
The <hr> tag also supports the Global Attributes in HTML.
Event Attributes
The <hr> tag also supports the Event Attributes in HTML.
More Examples
Example
Align a <hr> element (with CSS):
<hr style="width:50%;text-align:left;margin-left:0">
Try it Yourself »
Example
A noshaded <hr> (with CSS):
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
Try it Yourself »
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 »
