hr element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The hr element represents a thematic division or break in the text. This breaks can split the content in two fragments with different topics or two scenes in a novel. Browsers usually represent this break visually, through a horizontal rule.

The hr element shouldn't be used to indicate the beginning or end of a section. For these purposes exists the section element.

In previous versions of the standard, the hr element had several presentational attributes that have been removed in the HTML5 specification. Authors should drop their use in favor of style sheets.

Examples

In this example, a couple of paragraphs are separated by the hr element to emphasize the contrast in their topics.

<section>
  <h1>Communication media</h1>
  <p>Radio is the radiation (wireless transmission) of electromagnetic signals through the atmosphere or free space. Information, such as sound, is carried by systematically changing (modulating) some property of the radiated waves, such as their amplitude, frequency, phase, or pulse width. When radio waves strike an electrical conductor, the oscillating fields induce an alternating current in the conductor. The information in the waves can be extracted and transformed back into its original form.</p>
  <hr>
  <p>Television (TV) is a telecommunication medium that is used for transmitting and receiving moving images and sound. Television can transmit images that are monochrome (black-and-white), in color, or in three dimensions. Television may also refer specifically to a television set, television program, or television transmission.</p>
</section>

Communication media

Radio is the radiation (wireless transmission) of electromagnetic signals through the atmosphere or free space. Information, such as sound, is carried by systematically changing (modulating) some property of the radiated waves, such as their amplitude, frequency, phase, or pulse width. When radio waves strike an electrical conductor, the oscillating fields induce an alternating current in the conductor. The information in the waves can be extracted and transformed back into its original form.


Television (TV) is a telecommunication medium that is used for transmitting and receiving moving images and sound. Television can transmit images that are monochrome (black-and-white), in color, or in three dimensions. Television may also refer specifically to a television set, television program, or television transmission.

Now, let's place a break between two paragraphs belonging to different scenes in a novel.

<p>The wall was frozen and burned his ear but he needed to know. After several minutes bearing the cold and a couple of heavy eyelids, Jhon lay on bed and fell instantly asleep.</p>
<hr>
<p>The Vice-Chancellor left his office in a hurry. He was tense and disturbed but tried hard to conceal his desperation...</p>

The wall was frozen and burned his ear but he needed to know. After several minutes bearing the cold and a couple of heavy eyelids, Jhon lay on bed and fell instantly asleep.


The Vice-Chancellor left his office in a hurry. He was tense and disturbed but tried hard to conceal his desperation...

Attributes

Specific attributes

align

The horizontal alignment of the break line. There are three possible values (case-insensitive):

  • left: break line is aligned to the left margin.
  • center: break line is centered.
  • right: break line is aligned to the right margin.

Because of its presentational nature, this attribute has become obsolete in HTML5 and should, therefore, not be used anymore. Authors should replace it with style sheets declarations.

Example

<hr align="left">

noshade

A boolean value that indicates wether the line should be plain or in 3D fashion. If the attribute is present, the line will be plain.

The presentational nature of this attribute has made it obsolete in HTML5. Authors should stop using it in favor of style sheets.

Example

<hr noshade>

size

A number of pixels to use as height of the horizontal rule.

This attribute has been removed from the HTML5 standard for its presentational nature. Authors should drop its use in favor of style sheets.

Example

<hr size="3">

width

A value indicating the width of the rule, in pixels or as a percentage relative to the horizontal available space.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<hr width="80%">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.