Want to divide up your page or indicate a separate section? The horizontal rule can do it for you. It's also extremely customizable with HTML and CSS attributes.

The horizontal rule is simply a way to draw a horizontal line across the page. A basic, unformatted horizontal rule looks like this:

---

... and is indicated by <hr> in HTML code. However, you can get quite fancy, changing the width, alignment, color and more with HTML attributes. Here are some of the options.

To alter the width, you use the "width" attribute (pretty logical, right?) like this:

<hr width="50%">

... which gives you a horizontal line across half the available space, like so:

---

You can also specify width in pixels, using the format <hr width="100px"> or just <hr width="100">.

Next let's change the color. Use the following format:

<hr color="#FF0000">

For the uninitiated, the letters and numbers above are hex code for the color red. The sample code above will give you a line like the one below:

---

You can set the horizontal rule's alignment to left, center or right. Just use code like the below sample:

<hr width="25%" align="center">

... and you will see a line like the following:

---

As you can see from that last example, you can combine attributes and they'll all work. As with most HTML attributes, it doesn't matter what order you use.

All of these examples apply to many other HTML elements, but the horizontal rule has a unique attribute as well: noshade. This attribute removes the line's 3-D effect. You can apply the noshade attribute as follows:

<hr noshade>
... and here's how it will look:

---

Now that you know how to add this nifty formatting tool, don't go crazy with it! A page covered with different-colored horizontal lines just looks cluttered and strange. The horizontal rule can be used very effectively in separating off a portion of your page – for example, if you have a footer section at the bottom of each page, you might add a horizontal rule just above it to set it off from the page contents.