How to Create a Horizontal Line in HTML
Horizontal rule lines allow the Web publisher to separate areas of the webpage into smaller, digestible sections, thus focusing the user to focus on what the Web publisher has presented. Unlike the underline tag <u></u>, the horizontal rule isn't tied to the text above or below it. It can also be positioned to the left, right, or center and can be any color, width, or height that the Web publisher chooses. This tutorial covers how to create a maroon, thick, left-aligned, horizontal line that separates the main heading from the remaining body of the document, which is blank.
Other People Are Reading
Things You'll Need
- Text editor, such as Source Edit (see Resources) Document uploading software, such as FileZilla (see Resources) Space on a server
Instructions
-
-
1
Type the following between the <body></body> tags, as shown:
<h1>My Document</h1>Establish a heading to your document, using the <h1></h1> heading tags. This tag alerts search engines that the words between these tags are the most important on the page. This heading will be the title of the webpage, giving meaning for the use of a horizontal line.
-
2
Type the horizontal rule tag, as shown:
<hr />The horizontal rule tag does not have an end tag. Include a space and a forward slash before the greater than sign.
-
-
3
Add the "align" attribute and set it equal to "left," as shown:
<hr align="left" /> -
4
Add the "size" attribute and set it equal to "4," as shown:
<hr align="left" size="4" />The "size" attribute's value determines how thick the line is, measured in pixels.
-
5
Add the "width" attribute and set it equal to "370," as shown:
<hr align="left" size="4" width="370" />The "width" attribute's value determines how long the line is, measured in pixels.
-
6
Add the"color" attribute to horizontal rule tag and set it equal to "maroon," as shown:
<hr align="left" size="4" width="370" color="maroon" />The color of this tag can be set to any standard color or any hexadecimal colors you choose. Precede the hexadecimal color with a "#" sign.
-
7
Save and upload your document to your server. Open your browser and locate the page. The page should have the maroon, horizontal rule under the title of the document.
-
1
Tips & Warnings
The <hr /> tag is deprecated, and W3Schools encourages the use of modified images of single pixels employing style sheet instructions to lengthen or heighten the lines to a desired width.
References
Resources
- Photo Credit All images are screen shots created by Eric Tilden
