Web Design in a Nutshell, 2nd Edition

Horizontal Rules

The simplest element you can add to a web page is a horizontal rule, plopped into place with the <hr> tag. In most browsers, horizontal rules display by default as an “embossed” shaded rule that extends across the full width of the browser window (or available text space). Horizontal rules are used as simple dividers, breaking an otherwise long scroll into manageable chunks.

Since it is a block-level element, a horizontal rule always creates a line break above and below. If you want additional space between the rule and the surrounding elements, insert <p> tags above and/or below the <hr>, as shown in Figure 12-10 (however, this is considered poor HTML form).

Figure 12-10. A <p> tag adds vertical space above or below a horizontal rule

There are a few attributes for the <hr> tag that allow authors to “design” rules more to their liking; however, all of them have been deprecated in HTML 4.01. They allow you to change the width, height, and alignment of the rule. You can also opt to turn off the 3-D shaded effect using the noshade attribute.

Specifying Thickness

The size attribute controls the thickness or weight of the rule. Size is specified in number of pixels. See Figure 12-11.

Figure 12-11. A 12-pixel rule

Specifying the Rule Length

Somewhat counterintuitively, the ...