HTML <hr> Tag

The HTML <hr> tag represents a paragraph-level thematic break in an HTML document.

The <hr> tag could be used in a scene change in a story, or a transition to another topic within a section of a reference book.

Syntax

The <hr> tag is written as <hr> (no end tag) with the new topic following the <hr> element (and the old topic preceding it).

Like this:

Examples

Change of Topic

This example demonstrates how you can use the <hr> tag to represent a change of topic within a section.

Note that the HTML5 specification states There is no need for an <hr> element between the sections themselves, since the <section> elements and the <h1> elements imply thematic changes themselves.

Change of Scene

Here, the <hr> tag is used to represent a change of scene in a story.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <hr> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <hr> tag/element.

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <hr> tag , as well as with all other HTML tags.

• accesskey
• class
• contenteditable
• contextmenu
• dir
• draggable
• dropzone
• hidden
• id
• inert
• itemid
• itemprop
• itemref
• itemscope
• itemtype
• lang
• spellcheck
• style
• tabindex
• title
• translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <hr> element, as well as any other HTML5 element.

• onabort
• oncancel
• onblur
• oncanplay
• oncanplaythrough
• onchange
• onclick
• oncontextmenu
• ondblclick
• ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• ondragover
• ondragstart
• ondrop
• ondurationchange
• onemptied
• onended
• onerror
• onfocus
• onformchange
• onforminput
• oninput
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• onload
• onloadeddata
• onloadedmetadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• onseeked
• onseeking
• onselect
• onshow
• onstalled
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The align, noshade, size, and width attributes are not supported in HTML5 (they were deprecated in HTML 4). Use CSS instead of these attributes.

Also, HTML 4 and previous versions defined the <hr> element in terms of presentation only (i.e. that it represented a horizontal rule). HTML5 has changed this, so that it now represents a paragraph-level thematic break. Note that most browsers usually present the <hr> element as a horizontal rule, but it now has a specific semantic purpose, rather than purely presentation.

To see more detail on the two versions see HTML5 <hr> Tag and HTML4 <hr> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <hr> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <hr> Tag and HTML4 <hr> Tag.

Tag Details

For more details about the <hr> tag, see HTML5 <hr> Tag and HTML4 <hr> Tag.

Specifications

Here are the official specifications for the <hr> element.

• HTML5 Specification (W3C)
• HTML Living Standard (WHATWG)
• Current W3C Draft (the next version that is currently being worked on)
• HTML 4 (W3C)

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.