Maddog's HTML Primer for Real People

Chapter 4, Lesson 12

Ch 4, L 12 - Horizontal Rules

If you already know how to turn create horizontal rules on a web page, and you know how to adjust the width and alignment of the horizontal rule, you can skip this lesson.

More rules?? No, No, No! I can't stand one more rule!

Hey, relax... loosen your suspenders a bit. What we're talking about here is a horizontal rule, you know - like if you took a plastic ruler and drew a line (or "rule") across the page with your pencil. Ahhh, yes! Now, that's cool looking.

The cyber-gurus who designed HTML thought this would be so cool, that they gave us a special HTML tag for creating a horizontal rule. It's a standalone tag (i.e., requires no closing tag) which looks like this:

<HR>

When the browser encounters this tag, it causes an automatic double end-of-line action (like a paragraph), then draws a "rule" across the screen (as wide as it needs to be), and then causes another automatic double end-of-line action. You can see an example of one located just below the chapter and lesson title, above.

This tag has several attributes which can be optionally modified. One is the 'WIDTH=' attribute. "Width" in this context means "width-wise (horizontally) on the screen". The value of this attribute can be specified in one of two ways: either as a percentage of the total width of the screen, or as a fixed number of screen pixels. If the value has a '%' sign, the width is interpreted by the browser to mean a percentage. Otherwise, it is interpreted as a specific number of screen pixels (or dots).

For example, if we wanted to specify a horizontal rule with a width of 50% of the screen width, we would use this:

but if we wanted to specify 50 pixels (dots), we would do this:

If we specify the width, we probably want to specify the alignment (left margin, right margin, or centered). With the <HR> tag, we can add a second attribute, 'ALIGN='. The horizontal rule's 'ALIGN' attribute can take one of three values: 'LEFT', 'RIGHT', or 'CENTER'. When specifying the alignment, place the 'ALIGN=' value in quotation marks. The browser assigns a default value for ALIGN=, in case you don't use that attribute, and on my browser it's ALIGN="CENTER", which is typical.

When using two attributes in a tag, a "space" must separate the different attributes. With the 'horizontal rule' tag, for example, if we wanted to specify a width of 75%, centered on the screen, we would use the following tag:

There are yet more attributes we can specify with the 'horizontal rule' tag. The 'SIZE=' attribute can be used to specify the 'SIZE' of the line, i.e., the height in screen pixels (dots). On my browser, the default value for 'SIZE=' is 2 pixels. If, for example, I wanted a horizontal rule with default characteristics, except 10 pixels high, I would specify the height in the 'SIZE=' as follows:

One last attribute of the 'horizontal rule' is worth mentioning: 'NOSHADE'. This attribute takes no value, but its mere presence in the opening tag tells the browser to modify the appearance of the horizontal rule by leaving out the grey shading. Since the grey shading is done differently on different browsers, it's difficult to say what result 'NOSHADE' will have, except that it will look different than the default. Here's how to designate a horizontal rule with a 'WIDTH' of 90%, a 'SIZE' of 5 pixels, center aligned, with NO shading:

Notice the space left between each attribute. Now, let's see some of this stuff demonstrated:


Here's the generic horizontal rule:<BR>
<HR>
Here's a horizontal rule with a specified 50% screen width:<BR>
<HR WIDTH=50%>
Here's a horizontal rule with a specified 50 <B>pixel </B> width:<BR>
<HR WIDTH=50>
Here's a horizontal rule with a specified 50 <B>pixel </B> width, 
     explicitly aligned center:<BR>
<HR WIDTH=50 ALIGN="CENTER">
Here's a horizontal rule with a specified 50 <B>pixel </B> width, 
     explicitly aligned left:<BR>
<HR WIDTH=50 ALIGN="LEFT">
Here's a horizontal rule with a specified 50 <B>pixel </B> width, 
     explicitly aligned right:<BR>
<HR WIDTH=50 ALIGN="RIGHT">
Here's a "normal" horizontal rule modified for size (height) of 10 pixels:<BR>
<HR SIZE=10>
Here's a horizontal rule specified for 90% screen width, 5 pixels high, 
     centered, with <B>NO</B> shading:<BR>
<HR WIDTH=90% SIZE=5 ALIGN="CENTER" NOSHADE>
<HR WIDTH=90% SIZE=5 ALIGN="CENTER" NOSHADE>

Here's the generic horizontal rule:

Here's a horizontal rule with a specified 50% screen width:

Here's a horizontal rule with a specified 50 pixel width:

Here's a horizontal rule with a specified 50 pixel width, explicitly aligned center:

Here's a horizontal rule with a specified 50 pixel width, explicitly aligned left:

Here's a horizontal rule with a specified 50 pixel width, explicitly aligned right:

Here's a "normal" horizontal rule modified for size (height) of 10 pixels:

Here's a horizontal rule specified for 90% screen width, 5 pixels high, centered, with NO shading:

Horizontal rules can really jazz up your homepage. Be aware that some older browsers may not support the use of attributes with the <HR> tag. In such a case, the browser ignores the attributes, and provides the default horizontal rule.

Overseer: Monty Northrup ...

... leave e-mail ...