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 »