The Horizontal Rule <HR> tag is rarely used well on most pages, in fact this useful tag is rarely used at all these days. This is unfortunate because this really is quite a versatile little tool you can apply to your pages. The instructions below will help you explore the many possible uses of this tag.
CORRECT USE OF THE HORIZONTAL RULE:
The Horizontal Rule tag, <HR>, is a line that runs horizontally across your webpage. We code it like this:
<HR>
The <HR> Tag is a one-sided tag (like the <IMG> or <META> tags we have discussed previously) so we DON'T need a Closing </HR> Tag to finish this tag set.
If you enter the <HR> tag above exactly the way you see it, you will get a line all the way across your webpage, the same color as your browser's color.
There are several Attributes you can use to modify your
Horizontal Rule:
WIDTH=
Use this Attribute to specify how wide you want your line to be. You can use percentage value to specify the percentage of the page you want the line to cover, or you can specify the absolute pixel size of the line.
Percentage Method:
WIDTH="50%"
This will give you a line exactly half the size of your page. This method is recommended since no matter what resolution the viewer is looking at your page in, the line will be 50% of the width of their screen.
Absolute Method:
WIDTH="300"
This number is the width in PIXELS. This works well when you need to specify an exact size for your line. For example, if you want to have a line the same size as a graphic,
you can specify the same width as the graphic.
ALIGN=
Using this Attribute will give you the ability to specify further, where the line should appear on your page. This is useful if you are trying to place a line that you have already defined as less than 100% the width of the page.
The correct Value's to use are "right", "left" and "center".
SIZE=
Use this Attribute to specify the HEIGHT of the line. If you want a line 20 pixels HIGH, we would code it like this:
SIZE="20"
If you do not specify a size, the line will default to SIZE="1"
NOSHADE
This Attribute is a little bit different than most since it has NO associated Value. This is more like an On/Off switch than a Value, as we have come to know them. You can specify that the line is displayed as a solid line with no shading (shading gives you that sorta 3-D effect) by coding the NOSHADE Attribute like this:
<HR NOSHADE>
As with most tags that use Attributes, you can COMBINE all or some of the Attributes into one tag, like this:
<HR WIDTH="50%" ALIGN="Center" SIZE="20" NOSHADE>
The above example would give you a line 50% the width of the page, sitting in the center, 20 pixels high, with no shading.
TIPS TO REMEMBER:
Attribute's are NOT case sensitive - you can use width=, WiDth= or WIDTH=
Value's are NOT case sensitive - you can use "left", "LeFt" or "LEFT"
ALWAYS use quotes with your value's. Some browsers work without them, but ALL browsers work with them.
