Horizontal Rules

Horizontal rules are the horizontal lines or bars that are used to separate items on a web page. Used correctly, they can help organize disparate information on a page (for example, the horizontal rule at the bottom of this page that separates the article from the copyright information). Used incorrectly, particularly the graphical rule (or bar), they are the second quickest visual signal of an amateurish web site. (Inappropriate page backgrounds are the quickest visual cue but we’ll discuss that next week.)

Use the horizontal rule tag, <hr>, instead of graphical rules or bars. Rainbow, 3D, striped, translucent and other graphical horizontal rules or bars are not only garish but dated, and eat up valuable download time for no good purpose. Use plain or black horizontal rules. A “plain” horizontal rule will appear 3-dimensional. To create a black rule, add “noshade” to your <hr> tag. If you are developing exclusively for the Internet Explorer 4+ browser, you may choose specify a color for the horizontal rule tag, however, I wouldn’t recommend it unless it’s grey. Color should be reserved to convey importance.

This doesn’t mean that your horizontal rules have to be dull. There are many subtle things that can be done with just the standard HTML horizontal rule tag, <hr>.

For Example:

<hr size=”10″ width=”10″ align=”center”>


Above is <hr width=”100″ align=”center”>
Below is <hr width=”100″ noshade align=”center”>


The “size” attribute specifies how thick the rule will appear. For example:

<hr size=”1″ noshade >


<hr size=”25″ noshade>


The “width” attribute specifies how long the rule will be. Width can be specified as a specific number of pixels (i.e., width=”25″) or as a percentage (i.e., width=”25%”). Using the percentage will give varying results depending upon where it’s used and the size of the browser window. The percentage used inside a table represents the percentage in relation to the width of the table cell. The percentage used outside of a table is in relation to the width of the browser window. If you’re in doubt, use a specific pixel number. For example:

<hr width=”100″ noshade >


<hr width=”100%”>


Notice that the default alignment for the horizontal rule tag is centered. If you want to change the alignment, you use the “align” attribute. For example:

<hr size=”1″ width=”100″ align=”left”>


<hr size=”1″ width=”100″ align=”right”>


With the HTML 4 standards, many of the horizontal rule attributes are deprecated in favor of using style sheet box elements to achieve the same effects. Unfortunately, there are still a large number of browsers in use that don’t support the new standards and style sheets.