HTML Vertical Rule Line Divider

 

Creating an HTML Vertical Rule – Line Divider

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:

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="image.gif" width="2" height="2" border="0">

Browser View

HTML coding viewed through a web browser:
html-line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="image.gif" width="5" height="50" border="0">

Browser View

HTML coding viewed through a web browser:
html-line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="image.gif" width="10" height="20" border="0">

Browser View

HTML coding viewed through a web browser:
html-line

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="image.gif" width="2" height="200" border="0">

Browser View

HTML coding viewed through a web browser:
html-line

 

HTML Code

HTML code viewed within an HTML document:
html-line

<img src="image.gif" width="5" height="200" border="0">

Browser View

HTML coding viewed through a web browser:
html-line

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

This concludes the HTML vertical rule line divider code.

 

 

 
Visit the following pages for a wealth of copy and paste codes and tips:

HTML Tips
Copy and paste special effect HTML codes for your web page.

HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.

HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.

JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.

Web Design Tips
Tips, tricks, and special effect codes for your web page.

HTML Tags
A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

ASCII Codes
Special text characters and code for your web page.