How to Insert Lines in HTML

This article shows you how to create horizontal lines in HTML and CSS. You can use horizontal lines to separate paragraphs of text or other content on your website. The newest way to add horizontal lines is using CSS and HTML5, but for now you can still use an HTML tag called “HR”. ^{[1] X Research Source}

Table of Contents

Using CSS/HTML5

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/1b/658928-9-1.jpg/v4-728px-658928-9-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/1b/658928-9-1.jpg/v4-728px-658928-9-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open or create a new HTML document. You can edit HTML text with a text editor like Notepad or a programming program like Adobe Dreamweaver. Follow these steps to open HTML documents in your preferred program:

Open Notepad or your favorite text editor/programming program.
Click the File menu.
Click Open .
Select the HTML file.
Click Open .

Add headings to HTML documents. If the HTML text does not have a heading, you need to perform the following steps to add a heading. The heading is entered between the “<html>” and “<body>” tags.

Type <head> above the text.
Press Enter twice to add two new lines.
Type </head> to close the heading.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/ca/658928-11-1.jpg/v4-728px-658928-11-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/c/ca/658928-11-1.jpg/v4-728px-658928-11-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Enter <style type="text/css"> in the header. The styling tag needs to be placed between the two heading tags. This is an operation that allows you to enter CSS code to style the HTML.

Or, you can use an external styling page for the HTML.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/1a/658928-12-1.jpg/v4-728px-658928-12-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/1a/658928-12-1.jpg/v4-728px-658928-12-1.jpg”,”smallWidth”:460,”smallHeight”:344 ,”bigWidth”:728,”bigHeight”:545,”licensing”:”<div class=”mw-parser-output”></div>”}

Type hr { . This is the CSS tag used to style the horizontal line. Add this tag after the styling tag in the header, or in an external CSS file.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/70/658928-13-1.jpg/v4-728px-658928-13-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/70/658928-13-1.jpg/v4-728px-658928-13-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add a CSS style for the “<hr>” tag. The styling part needs to be entered after the “hr {” tag. You can style the line in many ways. Please refer to the following examples.

Enter width: ##px; to set the length of the line. Replace ## with the number of pixels the length of the line. You can also use percentage (%) instead of pixels (px).
Enter height: ##px; to set the thickness of the line. Replace ## with the number of pixels the thickness of the line.
Enter background-cpor: ##; to color the line. Replace ## with the name of the color, or a pound sign (#) followed by the hexadecimal color code.
Enter margin-right: ##px; to set the number of pixels from the right edge. Replace ## with the number of pixels or “auto” (automatic). Using “auto” centers the line within the set width. The remaining space is divided equally between the left and right margins.
Enter margin-left: ##px; to set the number of pixels from the left edge. Replace ## with the number of pixels or “auto”. Using “auto” centers the line within the set width. The remaining space is divided equally between the left and right margins. ^{[2] X Research Source}
Enter margin-top: ##px; to set the top margin for the line. Replace ## with the number of pixels of the margin thickness.
Enter margin-bottom: ##px; to set the bottom margin of the line. Replace ## with the number of pixels of the margin thickness.
Enter border-width: ##px; to create a border around the line (optional). Replace ## with the number of pixels of the border thickness.
Type border-cpor: ##; to make the border color (optional). Replace ## with the name of the color, or the pound sign (#) followed by the hexadecimal color code.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/11/658928-14-1.jpg/v4-728px-658928-14-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/11/658928-14-1.jpg/v4-728px-658928-14-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Type } after setting the style. This closes the style setting for the <hr> tag.

Press ↵ Enter and type </style> . This is to create a new line and add a closing HTML styling tag. The “</style>” tag is entered after you have added the HTML elements that need to be styled with CSS.

Type <hr> anywhere in the body of the HTML text. The body of an HTML tag is the area between the “<body>” and “</body>” tags. This is the operation of adding horizontal lines to HTML text. Set the CSS style to be applied whenever you use the <hr> tag in HTML.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/be/658928-7-1.jpg/v4-728px-658928-7-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/be/658928-7-1.jpg/v4-728px-658928-7-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Save the HTML file. To save a text file in HTML format, you need to change the file extension (.txt, .docx) to “.html”. Follow these steps to save the HTML text file:

Click the File menu.
Click Save As if you created a new HTML file. Click Save to save the existing HTML file.
Enter a filename in the “File name” field.
Type “.html” right after the filename.
Click Save .

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/2/23/658928-15-1.jpg/v4-728px-658928-15-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/2/23/658928-15-1.jpg/v4-728px-658928-15-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Check the HTML file. To do this, you need to right-click on the file and select Open with , and then select a web browser. You should see a line show up where you put the “hr” tag. Your HTML code looks like this:

 <!DOCTYPE html> < html > < head > < style type = "text/css" > hr { width : 50 % ; height : 20 px ; background-cpor : red ; margin-right : auto ; margin-left : auto ; margin-top : 5 px ; margin-bottom : 5 px ; border-width : 2 px ; border-cpor : green ; } </ style > </ head > < body > < h1 > This is the heading </ h1 > < hr > < p1 > This is text separated by a line </ p1 > </ body > </ html >

Using HTML 4.01

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/1/18/658928-1-1.jpg/v4-728px-658928-1-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/1/18/658928-1-1.jpg/v4-728px-658928-1-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Open or create a new HTML document. You can edit HTML text with a text editor like Notepad or a programming program like Adobe Dreamweaver. Follow these steps to open HTML documents in your preferred program:

Open Notepad, or your favorite text editor/programmer.
Click the File menu.
Click Open .
Select the HTML file.
Click Open .

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/cf/658928-2-1.jpg/v4-728px-658928-2-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/c/cf/658928-2-1.jpg/v4-728px-658928-2-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Select the location where you want to insert the line. Drag the scroll bar down until you find an empty space above the section where the line should be inserted, and then click the leftmost part of the line to place the cursor directly in front of the line start.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/0/0b/658928-3-1.jpg/v4-728px-658928-3-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/0/0b/658928-3-1.jpg/v4-728px-658928-3-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ↵ Enter twice to create a blank line. This moves the text down.

Move the cursor back to the position where you want to insert the line. Just click, or use the arrow keys on your keyboard, to move the pointer to the position where you want the line to be.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/7/73/658928-4-1.jpg/v4-728px-658928-4-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/7/73/658928-4-1.jpg/v4-728px-658928-4-1.jpg”,”smallWidth”:460,”smallHeight”:344 ,”bigWidth”:728,”bigHeight”:544,”licensing”:”<div class=”mw-parser-output”></div>”}

Type <hr> in the space before the start of the line. The “<hr>” tag has the function of creating horizontal lines on the page.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/c/c0/658928-5-1.jpg/v4-728px-658928-5-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/c/c0/658928-5-1.jpg/v4-728px-658928-5-1.jpg”,”smallWidth”:460,”smallHeight”:341 ,”bigWidth”:728,”bigHeight”:540,”licensing”:”<div class=”mw-parser-output”></div>”}

Press ↵ Enter to put “<hr>” on a separate line. At this point, the <hr> tag needs to be placed on its own line and with no other code to the left or right.

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/f/f3/658928-6-1.jpg/v4-728px-658928-6-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/f/f3/658928-6-1.jpg/v4-728px-658928-6-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Add properties for horizontal lines (optional). You can add properties for horizontal lines, such as length, width, color, and alignment. Add the following codes right after the “hr” in brackets. You can add multiple attributes to brackets by using spaces to separate them. ^{[3] X Research Sources}

Type <hr size="#"> to change the thickness of the line. Replace # with the thickness number (such as size=”10″).
Type <hr width="#"> to change the length of the line. Replace # with the number of pixels or a percentage of the page width (such as width=”200″ or width=”75%”).
Type <hr cpor="#"> to change the color of the line. Replace # with the color name or hexadecimal code (such as cpor=”red” or cpor=”#FF0000″).
Type <hr align="#"> to align the line. Replace # with “right” (right), “left” (left), or “center” (center) (such as align="center"> )

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/b/be/658928-7-1.jpg/v4-728px-658928-7-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/b/be/658928-7-1.jpg/v4-728px-658928-7-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Save the HTML file. To save a text file in HTML format, you need to change the file extension (.txt, .docx) to “.html”. Follow these steps to save the HTML text file:

Click the File menu.
Click Save As if you created a new HTML file. Click Save to save the existing HTML file.
Enter a filename in the “File name” field.
Type “.html” right after the filename.
Click Save .

{“smallUrl”:”https://www.wikihow.com/images_en/thumb/6/68/658928-8-1.jpg/v4-728px-658928-8-1.jpg”,”bigUrl”:” https://www.wikihow.com/images/thumb/6/68/658928-8-1.jpg/v4-728px-658928-8-1.jpg”,”smallWidth”:460,”smallHeight”:345 ,”bigWidth”:728,”bigHeight”:546,”licensing”:”<div class=”mw-parser-output”></div>”}

Check the HTML file. To do this, you need to right-click on the file and select Open with , and then select a web browser. You should see a line show up where you put the “hr” tag. Your HTML code should look like this: ^{[4] X Research Sources}

 <!DOCTYPE html> < html > < body > < h1 > This is heading </ h1 > < hr size = "6" width = "50%" align = "left" cpor = "green" > < p1 > Here is a piece of text separated from the heading by a straight line. < / p1 > </body> < / html >

Steps

Using CSS/HTML5

Using HTML 4.01

Related Posts