Horizontal Rules

The Default Horizontal Rule

Need a slight page divider, and you don't want to use a graphic? Find out why horizontal rules (HR) rule!

The HTML for a Horizontal Rule is about as simple as HTML gets. Here's how the simple <HR> horizontal rule appears:

You'll notice that the horizontal rule also creates space above and below the rule, so you don't need to add a <P>paragraph tag when you're using a horizontal rule.

Specify the Height of a Horizontal Rule

You can specify the height of the horizontal rule in pixels. The HTML the examples below are <HR SIZE=2>, <HR SIZE=5>, <HR SIZE=10>, <HR SIZE=30>

Specify the Pixel Width of a Horizontal Rule

You can specify the width across the page for a horizontal rule in pixels. The HTML is <HR WIDTH=100>, as in the first example below. The following examples have a width of 200, 300, and 500 pixels.

Specify the Percentage Width of a Horizontal Rule

You can specify the width of the horizontal rule as a percentage of the screen's width. This is useful, since you never know what resolution a visitor to your web site is viewing your web site is using. The HTML for the examples below are <HR WIDTH=25%>,
<HR WIDTH=50%>,
<HR WIDTH=80%>,
<HR WIDTH=100%>.

Aligning the Horizontal Rule

You can align the horizontal rule as you can with the IMG SRC tag, by including the ALIGN=LEFT, ALIGN=RIGHT, or ALIGN=CENTER. The HTML for the examples below :
<HR ALIGN=LEFT WIDTH=100>,
<HR ALIGN=CENTER WIDTH=100>,
<HR ALIGN=RIGHT WIDTH=100>

Specifing No Shade on the Horizontal Rule

You can specify no shading on the horizontal rule:

Adding Color to a Horizontal Rule

You can specify the color of the horizontal rule. The HTML for a colored horizontal rule is < HR COLOR="#000000"> where the #000000 equals your hexcode number. Use our hexcode color selector or an HTML color tool to find a hexcode.

Note: You loose the shading on the Horizontal Rule when you add color.

Note Number 2: Netscape does not yet support colored horizontal rules.

View Horizontal Rules on Different Backgrounds:

View Horizontal Rules on a gray background
View Horizontal Rules on a patterned background

All information copyright Web Diner Inc., 1997. Do not redistribute or repost this content. Web Diner Tutorials | Home