HTML The Definitive Guide (45 page)
Read HTML The Definitive Guide Online
Authors: Chuck Musciano Bill Kennedy
5.1.1.3 The width attribute
The default rule is drawn across the full width of the view window. You can shorten or lengthen rules with the width attribute, creating rule lines that are either an absolute number of pixels wide or extend across a certain percentage of the current text flow. Most browsers automatically center partial-width rules; see the align attribute (section 5.1.1.4) to left-or right-justify horizontal rules.
Here are some examples of width
-specified horizontal rules (see Figure 5.4):
The following rules are 40 and 320 pixels wide no matter the actual width of the browser window
Whereas these next two rules will always extend across 10 and 75 percent of the window, regardless of its width:
Figure 5.4: Absolute versus relative rule widths
Notice, too, that the relative (percentage) value for the width attribute is enclosed in quotation marks; the absolute (integer) pixel value is not. In fact, the quotation marks aren't absolutely necessary, but since the percent symbol normally means that an encoded character follows, failure to enclose the percent width value in quotation marks may confuse other browsers and trash a portion of your rendered document.
In general, it isn't a good idea to specify the width of a rule as an exact number of pixels. Browser windows vary greatly in their width, and what might be a small rule on one browser might be annoyingly large on another. For this reason, we recommend specifying rule width as a percentage of the window width. That way, when the width of the browser window changes, the rules retain their same relative size.
The width attribute is deprecated in HTML 4.0, since its effects can be achieved with appropriate use of style sheets.
5.1.1.4 The align attribute
The align attribute for a horizontal rule can have one of three values: left, center, or right.
For those rules whose width is less than the current text flow, the rule will be positioned relative to the window margins accordingly. The default alignment is center.
A varied rule alignment makes for nice section dividers. For example, the source shown below
alternates a 35 percent-wide rule from right to center to the left margin (see Figure 5.5
):
Fruit Packing Advice ...
Shipping Kumquats
...
Juice Processing
...
The align attribute is deprecated in HTML 4.0, since its effects can be achieved with appropriate use of style sheets.
Figure 5.5: Varying horizontal rule alignment makes for subtle section dividers
5.1.1.5 The color attribute
Supported only by Internet Explorer, the color attribute lets you set the color of the rule line. The value of this attribute is either the name of a color or a hexadecimal triple defining a specific color.
For a complete list of color names and values, see Appendix F, Color Names and Values
.
By default, a rule is set to the same color as the document background, with the chiseled edges slightly darker and lighter than the background color. You lose the 3D effect when you specify another color, either in a style sheet or with the color attribute.
5.1.1.6 Combining rule attributes
You may combine the various rule attributes; their order isn't important. To create big squares, for example, combine the size and width
attributes (see Figure 5.6
):
In fact, some combinations of rule attributes are necessary - align and width, for example. Align alone appears to do nothing because the default rule width stretches all the way across the display window.
Figure 5.6: Combining rule attributes for special effects
5.1.1.7 The class, dir, event, id, lang, style, and title attributes
There are several nearly universal attributes for the many HTML content tags. These attributes give you a common way to identify (title) and label (id) a tag's contents for later reference or automated treatment; to change the contents' display characteristics (class, style); and to reference the language (lang) used and related direction the text should flow (dir). Of course, how language and the direction of text affect a horizontal rule is unclear. Nonetheless, they are standard
attributes for the tag. [The dir attribute, 3.5.1.1] [The lang attribute, 3.5.1.2]
[The id attribute, 4.1.1.4]
[The title attribute, 4.1.1.5]
[Inline Styles: The style Attribute, 9.1.1]
[Style Classes, 9.2.4]
In addition, there are all the user events that may happen in and around the horizontal rule that the browser senses and that you may react to via an on-event attribute and some programming.
[JavaScript Event Handlers, 13.3.3]
5.1.2 Using Rules to Divide Your Document
Horizontal rules provide a handy visual navigation device for your readers. To use
effectively as a section divider, first determine how many levels of headings your document has and how long you expect each section of the document to be. Then decide which of your headings warrant being set apart by a rule.
A horizontal rule can also delimit the front matter of a document, separating the table of contents from the document body, for example. Use a rule also to separate the document body from a trailing index, bibliography, or list of figures.
Experienced HTML authors also use horizontal rules to mark the beginning and end of a form. This is especially handy for long forms that make users scroll up and down the page to view all the fields. By consistently marking the beginning and end of a form with a rule, you help users stay within the form, better ensuring they won't inadvertently miss a portion when filling out its contents.
5.1.3 Using Rules in Headers and Footers
A fundamental style approach to HTML document families is to have a consistent look and feel, including a standard header and footer for each document. Typically, the header contains navigational tools that help users easily jump to internal sections as well as related documents in the family, while the footer contains author and document information as well as feedback mechanisms like an email link to the webmaster.
To ensure that these headers and footers don't infringe on the main document contents, consider using rules directly below the header and above the footer. For example (see also
Figure 5.7):
Kumquat Growers Handbook - Growing Season Guidelines
Growing Season Guidelines Growing season for the noble fruit varies throughout the United States, as shown in the following map:
Provided as a public service by the Kumquat Lovers of America
Figure 5.7: Clearly delineate headers and footers with horizontal rules
