home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Book HomeHTML & XHTML: The Definitive GuideSearch this book

Chapter 5. Rules, Images, and Multimedia

While the body of most documents is text, an appropriate seasoning of horizontal rules, images, and other multimedia elements make for a much more inviting and attractive document. These features are not simply gratuitous geegaws that make your documents look pretty, mind you. Multimedia elements bring HTML and XHTML documents alive, providing a dimension of valuable information often unavailable in other media, such as print. In this chapter, we describe in detail how you can insert special multimedia elements into your documents, when their use is appropriate, and how to avoid overdoing it.

You also might want to jump ahead and skim Chapter 12, "Executable Content". There we describe some catch-all tags, the HTML 4 and XHTML standard <object> and Netscape's <embed>, which let you insert all kinds of content and data file types, including multimedia, into your documents.

5.1. Horizontal Rules

Horizontal rules give you a way to separate sections of your document visually. That way, you give readers a clean, consistent, visual indication that one portion of your document has ended and another portion is beginning. Horizontal rules effectively set off small sections of text, delimit document headers and footers, and provide extra visual punch to headings within your document.

5.1.1. The <hr> Tag

The <hr> tag tells the browser to insert a horizontal rule across the display window. Like the <br> tag, <hr> forces a simple line break, although unlike <br>, <hr> causes the paragraph alignment to revert to the default (left-justified). The browser places the rule immediately below the current line, and content flow resumes below the rule. Section 4.7.1, "The <br> Tag"



Break a text flow and insert a horizontal rule























End tag:

None in HTML; </hr> or <hr ... /> with XHTML



Used in:


The rendering of a horizontal rule is at the discretion of the browser. Typically, it extends across the entire document. Graphical browsers may render the rule with a chiseled or embossed effect; character-based browsers most likely use dashes or underscores to create the rule.

There is no additional space above or below a horizontal rule. If you wish to set it off from the surrounding text, you must explicitly place the rule in a new paragraph, followed by another paragraph containing the subsequent text. For example, note the spacing around the horizontal rules in the following source and in Figure 5-1:

This text is directly above the rule.
And this text is immediately below. 
Whereas this text will have space before the rule.
And this text has space after the rule.

A paragraph tag following the rule tag is necessary if you want the content beneath the rule line aligned in any style other than the default left.

Figure 5-1

Figure 5-1. Paragraph tags give your text extra elbow room The noshade attribute

You may not want a 3D rule line, preferring a flat, 2D rule. Just add the noshade attribute to the <hr> tag to eliminate the effect. No value is required with HTML. Use noshade="noshade" with XHTML. Note the difference in appearance of a "normal" 3D rule versus the noshade 2D one in Figure 5-3. (We've also exaggerated the rule's thickness for obvious effect, as evident in the source HTML fragment.)

<hr size=32>
<hr size=32 noshade>

The noshade attribute is deprecated in HTML 4 and XHTML, since its effects can be achieved with appropriate use of style sheets.

Figure 5-3

Figure 5-3. Netscape's 3D rule versus the noshade 2D option 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, "The align attribute") 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
<hr width=40>
<hr width=320>
Whereas these next two rules will always extend across
10 and 75 percent of the window, regardless of its width: 
<hr width="10%">
<hr width="75%">
Figure 5-4

Figure 5-4. The long and short of absolute and 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 with standard HTML,[29] 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.

[29]With XHTML, double quotes are required around all attribute values.

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 and XHTML, since its effects can be achieved with appropriate use of style sheets. 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 triplet that defines a specific color. For a complete list of color names and values, see Appendix G, "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. Combining rule attributes

You may combine the various rule attributes; their order isn't important. To create big rectangles, for example, combine the size and width attributes (see Figure 5-6):

<hr size=32 width="50%" align=center>

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

Figure 5-6. Combining rule attributes for special effects

Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.