HR element in HTML

4.8 HR -- Horizontal Ruled Line

The HR element is used to draw a horizontal dividing line completely across the screen. This can be to logically separate blocks of text, or to separate icon lists from the body of the text.

The HR element is empty (you don't need a </HR>). Netscape extensions are discussed at the bottom of the page.

4.8.1 Example of HR

The following shows an example of the use of <HR> and the resulting rendering (on your browser).

<p>
The following document is scanned from the back of 
a cereal box.  To see the scanned image, press the
icon at the bottom of the text ....
</p>
<HR>
<H1> MIGHTY CHOKEE-OS! </H1>
<p>The cereal of chocolate deprived kiddies everywhere! </p>
<p> Aren't you lucky your parents love you enough
to buy you CHOCKEE-OS! </p>
<p> Remember to ask Mom and Dad for NEW SUPER 
CHOCKEE-OS, now with Nicotine!!! </p>

This is rendered as:

The following document is scanned from the back of a cereal box. To see the scanned image, press the icon at the bottom of the text ....

MIGHTY CHOKEE-OS!

The cereal of chocolate deprived kiddies everywhere!

Aren't you lucky your parents love you enough to buy you CHOCKEE-OS!

Remember to ask Mom and Dad for NEW SUPER CHOCKEE-OS, now with Nicotine!!!

4.8.2 Netscape Attribute Extensions

Netscape introduced four attribute extensions to the HR element -- these are now widely supported by current browsers, and are integrated into the HTML 4 specification. These attributes and their meanings are:

SIZE="n" --specifies the vertical width, in pixels, of the dividing line (n is an integer).
WIDTH="n", or "n%" --specifies the horizontal width, in pixels or as a percentage of the display width, of the dividing line (n is an integer).
ALIGN="left", "right", "center" -- specifies the alignment of the dividing line on the page. The default is centered.
NOSHADE --Draw the dividing line as a solid black bar -- the default is a shaded bar.

Internet Explorer 3+ also supports a COLOR attribute to set the color of the horizontal rule. This is not supported by Netscape Navigator.

Here are some examples:

<hr size=4 width=80%>
<hr size=10 width=40>
<hr size=10 width=40 align="left">
<hr size=10 width=40 align="left" noshade>
<hr size = 5 width=20% align="right">
<hr size = 5 width=20% align="left" color="red">

Which are rendered as

You will see nothing special unless your browser supports these Netscape attributes.