Horizontal Rules
by Jocelyn Kinnear
email this article
Summary : Have you ever spent a long amount of time coding to create a line or a divider for some text? Well, why would you spend a long time doing that when HTML has an element for you to use? This article will show you how to apply a horizontal rule (aka a divider) to your website quickly and easily.
Even if you think that it's easy to add an extra table row for use as a horizontal rule, you shouldn't -- tables are meant to represent data and are not meant for styling your website. Perhaps you think it's easy to use a div as a horizontal rule or divider, but it can be easier! Say hello to the Horizontal Rule element; <hr>
Above is a Horizontal Rule in its natural beauty. Simple and boring. No problem for us -- we can use style sheets to style this boring line. Thanks to our good friend CSS, we can change the background color, set the height, border, background image, and so forth.
The easiest way to give your HR a visual appeal is to give it a colored border. For example's sake, we'll give it a red border:
<hr style="border: 1px solid #f00;">
Here you can see that this creates a red line that is 2 pixels tall:
A line like the one above would be good to use when you want to visually divide some paragraphs. Using an HR tag is much more appropriate than using a div or a table row.
You can give an HR a background color, but only standard-compliant browsers will be able to see the color. Browsers like Internet Explorer are not complaint and will not show the color as it should. A good compliant browser is offered free at Mozilla.org.
In order to give a background color that is visible in IE, we will have to set a height of 3px. Even if we do that, we still have to deal with HR's natural grey border, which makes the red color look brown/orange.
<hr style="background-color:#f00;height:3px;">
Resulting line:
Normally, we would be able to remove the border by using "border: 0px;" in the style sheet, but a lot of browsers don't understand that as they should. What we can do instead is set the border to be a different color using border-color: #ff00ff
<hr style="background-color:#f00;height:3px;border-color:#ff00ff">
Some of you might catch your self using a simple IMG tag instead of any of the other methods mentioned. Well, using an image as a divider isn't fair to your visually impaired visitors that are using browsers that read the website to them. It wouldn't be too nice to hear a paragraph being read out loud and then hear "Image..." right in the middle of it. Even if you use an alt attribute in your image tag, you should consider using an HR with a background image:
<hr style="background-image: url(/hr.gif); height:6px;">
Here is the resulting line:
You can replace "/hr.gif" with the URL or path of your own image and you can edit the number in "height:6px" to reflect the height that you want.
