If you're looking for a way to add an HTML vertical rule or line divider to your web page, you have most likely discovered that this isn't possible with HTML code. However, you can do so using an image.

In addition, you can also use an image to create a horizontal rule within your HTML code.

The image below, which looks like this (a tiny blue dot): is a 2 pixel by 2 pixel image. This single image can be used to create an HTML vertical or horizontal line within your web page simply by changing the HTML image code HEIGHT and WIDTH attributes.

Note: In order for this HTML code to work properly, you will need to create an image that is 2 pixels by 2 pixels in size and upload it to your web server. You will then need to link to the image within your HTML image code.

If you'd like to use the image in this example, you're welcome to copy it.

Here's how:

Place your mouse pointer over the little blue dot (enlarged to assist you) below. Right click, and go to 'Save Picture As.' A window will load and enable you to select the folder on your computer in which you'd like to save the image.

Here's the image:

<IMG SRC="image.gif" WIDTH="2" HEIGHT="2" BORDER="0">

<IMG SRC="image.gif" WIDTH="200" HEIGHT="2" BORDER="0">

<IMG SRC="image.gif" WIDTH="200" HEIGHT="5" BORDER="0">

<IMG SRC="image.gif" WIDTH="2" HEIGHT="200" BORDER="0">

<IMG SRC="image.gif" WIDTH="5" HEIGHT="200" BORDER="0">

Edit the text indicated in bold to suit your needs.

HTML vertical rules provide a great way to divide your web page contect areas and add a bit of color to your web page.