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>
<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.
Paragraph 1 text. This is a short paragraph. Here we are trying to show you to use the horizontal rule.
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|
|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|
||Sets horizontal rule alignment left & rule width 20 pixels|
||Sets horizontal rule alignment center & rule width is 50% page width|
||Aligns the horizontal rule to the right of the page and the rule width is 425 pixels.|
||Specifies the horizontal rule height size to be 10 pixels|
||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: