Learn Scripting Languages from the Master!
PrintAdding horizontal rules
Like in HTML, XHTML has the <hr> tag to insert horizontal rules to break up long section of a webpage document. The <hr> tag is an empty tag meaning it does not contain any content. Simply insert the <hr> (more precisely <hr />. This represents both of an opening and closing tag in XHTML. Although little more markup, <hr> and </hr> are equivalently valid.) tag in your markup where ever you want the horizontal rule to appear on the web page. See the following as an example:
<h4>This is some heading</h4><p>Paragraph 1 text. This is a short paragraph. Here we are trying to show you to use the horizontal rule.</p><hr /><h4>Section 2</h4><p> This is text separated from the top section with a horizontal rule. Horizontal rules are helpful for breaking up long sections of text with horizontal lines.</p>
As the output shows below, <hr> tag renders horizontal rules as a shaded line spanning the entire page width of the browser window.
This is some heading
Paragraph 1 text. This is a short paragraph. Here we are trying to show you to use the horizontal rule.
Section 2
This is text separated from the top section with a horizontal rule. Horizontal rules are helpful for breaking up long sections of text with horizontal lines.
Although you can customize horizontal rule properties with four <hr> tag attributes, the attributes deprecated in favor of use of cascaded style sheets. Table 1 shows the four attributes that can be used to control the appearance and placement of horizontal rules.
| Table 1 attributes of the horizontal rule tag | |
|---|---|
| Attribute | Purpose |
| align="left" | Specifies left align |
| align="center" | Specifies center align |
| align="right" | Specifies right align |
| size="N" | Sets horizontal rule height, measured in pixels, as specified by the number N. |
| noshade="noshade" | Specifies no shading for the horizontal rule |
| width="N" | Sets horizontal rule width, measured in pixels, as specified by the number N. |
| width="N%" | Sets horizontal rule width (measured as percentage of browser page width). |
Table 2 provides some examples of using horizontal rules attributes.
| Table 2 some example of horizontal rules attributes in use | |
|---|---|
| Markup | Explanation |
<hr align="left" width="20" /> |
Sets horizontal rule alignment left & rule width 20 pixels |
<hr align="center" width="50%" /> |
Sets horizontal rule alignment center & rule width is 50% page width |
<hr align="right" width="425" /> |
Aligns the horizontal rule to the right of the page and the rule width is 425 pixels. |
<hr size="10" /> |
Specifies the horizontal rule height size to be 10 pixels |
<hr size="10" noshade="noshade" /> |
Specifies the horizontal rule height size to be 10 pixels but no shading. |
The following shows the output of each of the markup shown in table 2: