Learning HTML 3.2 by Examples, section 5 Descriptions of HTML 3.2 tags:

HR - change in topic (horizontal rule)


To indicate change in topic, e.g. in order to separate sections of a document.

Typical rendering

A horizontal rule (full-width by default). Not necessarily preceded with or followed by vertical white space; you may wish to consider the effect putting the texts before and after an HR tag into P elements.

In a speech based user agent, the tag could be rendered as a pause.

Basic syntax


Possible attributes (Not in HTML 2.0!)

attribute name possible values meaning notes
ALIGN LEFT, RIGHT, CENTER horizontal alignment of the rule default is CENTER
NOSHADE NOSHADE requests the rule to be rendered in a solid color as opposite to the traditional two-color "groove"
SIZE integer height of the rule, in pixels  
WIDTH width specification width of the rule  

All of these attributes are deprecated in HTML 4.0

Allowed context

Block container.




Example HR-1.html:

Some text, followed by a basic (default) horizontal rule.
Some other text.

Example HR-2.html:

A horizontal rule placed at the right and half the width of
the document layout:
An example with all possible spices: placed at left,
solid rule (no shading), height 5 pixels, width 100 pixels:


Don't overuse HR. The document may not look good if you have a lot of rules with just a little text between.

It is usually better to use a percentage specification than absolute number of pixels. The user's window might be very different from yours.

Date of last update: 2010-12-16.
This page belongs to the free information site IT and communication, section Web authoring and surfing, by Jukka "Yucca" Korpela.