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 line has are used to visually separate sections of a web page-just 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. To convert this tag to XHTML and to ensure compatibility with html browsers, and a space and a forward slash to the end of 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:

<ht size+”2” />

<hr width=””75”/>

<hr align=”center” size=”4” width=”200”/>

The following input snows a rule line and a list as you would write it in XHTML1.0

Input

<hr/>

<h2> to do on Friday</h2>

<u1>

<1i>do 1audry</1i>

<1i> send FedEx with pictures</1i>

<1i>have 1unch with Mollie</1i>

<1i> read email</1i>

</u1>

<hr/>

Figure 6.6 shows how they appear in a browser.

OUTPUT

FIGURE 6.6 SHOWS HOW THEY APPEAR IN A BROWSER.

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>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.

NOTE

Although presentation attributes such as size, width, and align are still supported in HTML 4.0, 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:

INPUT

<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”/>

OUTPUT

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 of the user resizes the browser window. Figure 6.8 shows the result of the following code, which displays some sample rule line widths:

INPUT

<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%” />