Search this site...

Adding 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: