How to Add a Dividing Line in HTML

Experienced Web page designers know that dividing large blocks of text into smaller sections or columns makes them easier to read. Simply leaving blank space between blocks of text may lead to confusion when placing unrelated material on a single page. Adding lines to divide blocks of text or content allows a Web designer to give visual guidance to website visitors. Lines also make even plain, text-only websites more attractive. HTML has a simple native function to draw horizontal lines on a page; however, vertical division lines require slightly more work.

Things You'll Need

  • HTML or text editor
  • Image editor

Instructions

  1. Horizontal Line

    • 1

      Open the HTML file with a text or HTML editor. Locate the section of text where you want to place the line.

    • 2

      Insert the code "<hr>" -- without the quotation marks -- and save the file. This is the HTML tag for a horizontal rule. Placing this tag into the page's HTML code instructs the browser to draw a line where the tag is encountered.

    • 3

      Open a browser and inspect the results of the code change.

    Vertical Line

    • 1

      Open an image editor. Microsoft Paint is included with the Windows operating system. Use this or the image editor of your choice. Create an image in your preferred color that is two pixels wide and two pixels tall. Save this image in the same directory as your HTML code, with the name "vertical_line.gif" -- again, without the quotation marks.

    • 2

      Open the HTML file with a text or HTML editor. Locate the section of text where you want to place the line.

    • 3

      Insert the code <IMG SRC="vertical_line.gif" WIDTH="2" HEIGHT="200" BORDER="0">. This creates a vertical line two pixels wide and 200 pixels tall on the page.

    • 4

      Open a browser and inspect the results of the code change.

Tips & Warnings

  • Optional switches are available for both the <hr> and <image> tags, allowing you to change the length, width and positioning of these lines.
  • There is no vertical equivalent in HTML for the horizontal rule tag, so use the image tag along with a small image that can be repeated to form a solid line.
  • Since the vertical line is treated by HTML as an image, use text-wrapping options when placing a vertical line immediately to either side of a text column.
  • When possible, test all new code in popular browsers. Firefox, Internet Explorer, Chrome and other browsers interpret HTML in slightly different and sometimes surprising ways. Viewing new code on all the major browsers will give you an idea of what your visitors are seeing.
Related Searches

References

Resources

  • Photo Credit Comstock/Comstock/Getty Images

You May Also Like

Related Ads

Check It Out

Geek Vs Geek: The Best Tech of 2014