HTML Reference Guide - The <HR> Tag

[ben2ong2]

To separate blocks of text in a document you can use the simple but useful <HR> tag, which puts a straight line across the page. There is no ending tag for the horizontal rule. The very inclusion of <HR> introduces the separating line.

Some important points to remember when using this tag:

The browser starts the horizontal rule from a new line and any text after this tag is also displayed on a new line.
The browser introduces some space before and after this tag.


An <HR> tag without any attributes introduces a separator that looks like the one below.


--------------------------------------------------------------------------------

You can change the length, width, size, color and alignment of the horizontal rule using various attributes. Lets examine them.

WIDTH Attribute
This attribute defines the length of the rule. A value is required for this attribute. This value can be expressed in pixel numbers or percentage, which determines the length based on the width of the browser window.

<HR WIDTH="50"> presents a rule which is 50 pixels in length as:
--------------------------------------------------------------------------------

<HR WIDTH="70%"> specifies that the length of the rule should be 70% of the page's width as:
--------------------------------------------------------------------------------


SIZE Attribute
The SIZE defines the thickness of the horizontal rule. You can change the thickness by specifying the number of pixels with the value.

<HR SIZE="1">: 1 pixel thick.
--------------------------------------------------------------------------------

<HR SIZE="8">: 8 pixels thick.
--------------------------------------------------------------------------------

<HR SIZE="30">: 30 pixels thick.
--------------------------------------------------------------------------------


ALIGN Attribute
You can align horizontal rules using one of the three values for ALIGN attribute, "CENTER", "LEFT", or "RIGHT". The default value for this attribute is "CENTER". This means that if you skip using this attribute, the horizontal rule will always be centrally aligned.

<HR ALIGN="CENTER" WIDTH="50%">: Centrally aligned; there is no need to specify this explicitly as this is the default.
--------------------------------------------------------------------------------

<HR ALIGN="LEFT" WIDTH="50%">: Aligned to the left.
--------------------------------------------------------------------------------

<HR ALIGN="RIGHT" WIDTH="50%">: Aligned to the right.
--------------------------------------------------------------------------------


NOSHADE Attribute
You would have noticed that the horizontal rules are shaded, they have this 3D kind of effect. If you don't want this, use the NOSHADE attribute. NOSHADE takes no values.

<HR WIDTH="50%" NOSHADE SIZE="5">
--------------------------------------------------------------------------------

<HR WIDTH="50%" NOSHADE SIZE="15">
--------------------------------------------------------------------------------


The rendering of rules using NOSHADE differs in Internet Explorer and Netscape Communicator. Communicator tends to put rounded edges to rules if their thickness is more than 5 pixels.

COLOR Attribute
This is the first time you have encountered any color attribute in this tutorial. So I shall keep it small and simple leaving the details for later.
The COLOR attribute of <HR> is NOT recognized by Netscape Communicator (Communicator displays the non-shaded rules in a dull gray color only). The attribute takes a hexadecimal color notation or the name of the color.
( Confused... you'll find a thorough description on colors, here).

<HR COLOR="BLUE" SIZE="4" NOSHADE>: Blue colored rule, 4 pixels in thickness.
--------------------------------------------------------------------------------

<HR COLOR="RED" SIZE="10" WIDTH="50%" NOSHADE>: Red colored rule, 10 pixels in thickness.
--------------------------------------------------------------------------------


Also note how I have combined the various attributes inside a single tag to get the results I want.