Horizontal Rules

The <hr> tag, which has no closing tag in HTML and no text associated with it, creates a horizontal line on the page. Rule lines are used to visually separate sections of a web pagejust before headings, for example, or to separate body text from a list of items.

Closing Empty Elements

The <hr> tag has no closing tag in HTML. To convert this tag to XHTML and to ensure compatibility with HTML browsers, add a space and a forward slash to the end of the tag:

<hr />

If the horizontal line has attributes associated with it, the forward slash still appears at the end of the tag, as shown in the following examples:

<hr size="2" /> <hr width="75%" /> <hr align="center" size="4" width="200" />

The following input shows a rule line and a list as you would write it in XHTML 1.0:


<hr /> <h2>To Do on Friday</h2> <ul> <li>Do laundry</li> <li>Send FedEx with pictures</li> <li>Have lunch with Mollie</li> <li>Read Email</li> <li>Set up Ethernet</li> </ul> <hr />

Figure 6.6 shows how they appear in a browser.


Figure 6.6. An example of how horizontal rules are used around a list.

Attributes of the <hr> Tag

In HTML 2.0, the <hr> tag is just as you see it, with no closing tag or attributes. However, HTML 3.2 introduced several attributes to the <hr> tag that give you greater control over the appearance of the line drawn by <hr>. All these attributes have been deprecated in favor of style sheets in the HTML 4.01 specification.


Although presentation attributes such as size, width, and align are still supported in HTML 4.01, style sheets are now the recommended way to control a page's appearance.

The size attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this also is the smallest that you can make the rule line. Figure 6.7 shows the sample rule line thicknesses created with the following code:


<h2>2 Pixels</h2> <hr size="2" /> <h2>4 Pixels</h2> <hr size="4" /> <h2>8 Pixels</h2> <hr size="8" /> <h2>16 Pixels</h2> <hr size="16" />


Figure 6.7. Examples of rule line thicknesses.

The width attribute specifies the horizontal width of the rule line. You can specify the exact width of the rule in pixels. You can also specify the value as a percentage of the browser width (for example, 30% or 50%). If you set the width of a horizontal rule to a percentage, the width of the rule will change to conform to the window size if the user resizes the browser window. Figure 6.8 shows the result of the following code, which displays some sample rule line widths:


<h2>100%</h2> <hr /> <h2>75%</h2> <hr width="75%" /> <h2>50%</h2> <hr width="50%" /> <h2>25%</h2> <hr width="25%" /> <h2>10%</h2> <hr width="10%" />


Figure 6.8. Examples of rule line widths.

If you specify a width smaller than the actual width of the browser window, you can also specify the alignment of that rule with the align attribute, making it flush left (align="left"), flush right (align="right"), or centered (align="center"). By default, rule lines are centered.

Finally, in most current browsers, the noshade attribute shown in the following example causes the browser to draw the rule line as a plain line without the three-dimensional shading, as shown in Figure 6.9.

Handling Attributes Without Values

In HTML 4.0 and earlier versions, a value isn't required by the noshade attribute. The method you use to apply this attribute appears as follows:

<hr align="center" size="4" width="200" noshade>

To comply with XHTML 1.0, however, all attributes require a value. The HTML 4.01 specification requires that Boolean attributes (such as noshade) have only the name of the attribute itself as the value. The following example demonstrates how to apply the noshade attribute to the <hr> tag in compliance with the XHTML 1.0 specification.

<hr align="center" size="4" width="200" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="400" noshade="noshade" /> <h1 align="center">NorthWestern Video</h1> <hr align="center" size="4" width="400" noshade="noshade" /> <hr align="center" size="4" width="300" noshade="noshade" /> <hr align="center" size="4" width="200" noshade="noshade" /> <h2 align="center">Presents</h2>


Figure 6.9. Rule lines without shading.

Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)
ISBN: 0672328860
EAN: 2147483647
Year: 2007
Pages: 305

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net