How to Draw Lines in HTML

HTML lines can be used to separate content on a Web page.

Just like books have chapters, Web pages can be divided into sections. This can be accomplished by separating the content using lines. The lines become visible once the proper HTML tags are added to a page's code. The lines are also customizable, including their width, height and positioning.

Instructions

1. Launch an HTML editor. Use a text editor if one is unavailable. TextEdit (Mac) and Notepad (Windows) come preinstalled on Apple and Microsoft operating systems.

2. Select "File," and "Open" from the program's navigation window. Select "New" if you're creating a new HTML file. Select "Open," and browse for your archived HTML file, if you're altering one.

3. Locate the spot to add a line. Place the following code in the body of the HTML: <hr />. "hr" stands for horizontal rule. This code will put a line from one end of the page's body or table to the other.

4. Customize the "hr" tag. There are four attributes to alter the default state of the "hr" tag: align (left, center, right), noshade, size (pixels) and width (pixels). Align positions the horizontal rule on the page. Noshade removes the drop shadow. Size equals the height of the horizontal rule, while width signifies how long it is. A customized "hr" tag could look as follows:

   <hr align="center" noshade="noshade" size="3" width="15" />

5. Save your HTML document. Upload the file to your Web server. Preview to ensure the line displays to your liking.

1. Open a graphic editing program. Create a solid color image that measures one pixel by one pixel. Save as a .jpg file. Upload it to your Web server. Note the image's file path.

2. Open your HTML document to edit. Place the image using an HTML tag where you want the line to appear: <img src="http://www.yoursite.com/image.jpg">

3. Customize your image's HTML code. Use the height and width HTML attributes to alter the display of the line.

   Horizontal Line: <img src="http://www.yourimage.com/image.jpg" height="2" width="500">

   Vertical Line: <img src="http://www.iamge.com/image.jpg" height="300" width="1">

   The numbers associated with "height" and "width" are adjustable.

4. Save your HTML document. Upload it to the Web server. Preview it to make sure the lines appear as intended.

References

• W3Schools.com: HTML HR Tag
• Tizag: HTML Tutorial - Horizontal Rule
• Web Source: Creating an HTML Vertical Rule - Line Divider