Horizontal Rules | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

As sections are added to an HTML document, it is often useful to break up the document into visually distinct regions . A horizontal rule, indicated by the < hr> tag, is an empty block- level element that serves this purpose. As an empty element under XHTML, horizontal rules are written as <hr /> .

Historically, under HTML 2.0, horizontal rules generally were rendered as an etched bar or line across a browser window. With HTML 3.2 and beyond, more control over the horizontal rule's look and size was added. For example, the size attribute sets the bar's thickness (height) in pixels. The width attribute sets the bar's width in pixels or percentage. The align attribute sets its alignment to left, right, or center. The noshade attribute renders the bar without a surrounding shadow. Additional browser-specific attributes (such as color ) are described in the element reference in Appendix A. Under strict HTML 4.0 and XHTML, the various presentation attributes for the horizontal rule have been removed in favor of CSS, leaving the exact look of the line to the browser rendering the page. An example of horizontal rules and their basic attributes is shown next . A browser rendering is shown in Figure 3-11.

Figure 3-11: Rendering of horizontal rule example

Note

Although it looks like a physical element, hr can have some logical meaning as a section break. For example, under an alternative browser, such as a speech-based browser, a horizontal rule theoretically could be interpreted as a pause. A handheld browser with limited resolution might use it as a device to limit scrolling of the text.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Horizontal Rule Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <p>  HR size of 10  </p>   <hr size="10" />   <p>  HR with width of 50% and no shading  </p>   <hr width="50%" noshade="noshade" />   <p>  HR with width of 200 pixels, size of 3 pixels, and no shading  </p>   <hr width="200" size="3" noshade="noshade" />   <p>  HR with width of 100 pixels, aligned right  </p>   <hr align="right" width="100" />   <p>  HR with width of 100 pixels, aligned left  </p>   <hr align="left" width="100" />   <p>  HR with width of 100 pixels, aligned center  </p>   <hr align="center" width="100" />   </body>   </html>

< Day Day Up >