Horizontal Rules

The Horizontal Rule is created by a simple <HR> tag as displayed below:

<HR>

The <HR> tag takes several attributes, including size, width, color, and align. Below are samples of each:

<HR> (default)

<HR noshade>

<HR SIZE="1">

<HR SIZE="5">

<HR SIZE="10">

<HR SIZE="20">

<HR SIZE="20" noshade>

<HR SIZE="1" noshade>

<HR SIZE="1" COLOR="black" noshade>

<HR WIDTH="25">

<HR WIDTH="50">

<HR WIDTH="100">

<HR WIDTH="250">

<HR WIDTH="25%">

<HR WIDTH="50%" ALIGN="left" >

<HR WIDTH="50%" ALIGN="center"> (default alignment)

<HR WIDTH="50%" ALIGN="right">

<HR WIDTH="100%"> (default width)

<HR COLOR="red">

<HR COLOR="green">

<HR COLOR="blue">

<HR COLOR="#FF8000">

<HR COLOR="#A06000">

<HR COLOR="#A06000" SIZE="10">

<HR COLOR="#A06000" SIZE="20" ALIGN="center">

<IMG SRC="sunset.gif" HEIGHT="20" WIDTH="100%">
Click Here to View the Original Image

Click Here to View the Original Image <IMG SRC="sunset.gif" HEIGHT="75" WIDTH="50%" ALIGN="right">

One of the disadvantages of the <HR> tag is that you cannot wrap text to either side of it. One way to work around that is to use an image instead of an <HR>. The image can be a simple ONE PIXEL square of a particular color, then you can stretch the image to the width and height desired, as well as use ALIGNment and ALT attributes.

<HR SIZE="50" WIDTH="2" COLOR="red" ALIGN="left">

<HR SIZE="2" WIDTH="250" COLOR="red" ALIGN="left">

<IMG SRC="RedDot.gif" WIDTH="2" HSPACE=

Here is an image ("RedDot.gif") <IMG SRC="RedDot.gif" WIDTH="50%" VSPACE= that can be used to resemble a horizontal rule. However, since it is an IMAGE and not a <HR>, we can wrap text around it.