How to Insert a Line in HTML

Adding a horizontal rule to your webpage using simple CSS and HTML

This wikiHow teaches you how to create a horizontal line in HTML and CSS. A horizontal line, also known as a horizontal rule, can be used to separate blocks of text or other content on your website. The most up-to-date way to add a line is to use CSS and HTML5, but it's still possible (for now) to use the "HR" HTML tag.[1]

Method 1
Method 1 of 2:

Using CSS/HTML5

  1. Image titled 658928 9 1
    1
    Open or create a new HTML document. HTML documents can be edited using a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver. Use the following steps to open an HTML document in the program of your choice:
    • Open Notepad, or a text editor/code editor of your choice.
    • Click the File menu.
    • Click Open.
    • Select an HTML file.
    • Click Open.
  2. 2
    Add a head to your HTML document. If your HTML document doesn't already have a head, use the following steps to add a head. The head goes after the "<html>" tag, and before the "<body>" tag.
    • Type <head> at the top of the document.
    • Press the Enter key twice to add two new lines.
    • Type </head> to close the head.
    Advertisement
  3. Image titled 658928 11 1
    3
    Type <style type="text/css"> in the head. The style tag goes in between the two head tags. This creates a place where you can input CSS code to style your HTML.
  4. Image titled 658928 12 1
    4
    Type hr {. This is the CSS tag for styling your horizontal line. Add this after the style tag in your head, or in your external CSS file.
  5. Image titled 658928 13 1
    5
    Add CSS styles for your "<hr>" tag. These go after the "hr {" tag. There are many ways you can style a horizontal line. The following are a few examples.
    • Type width: ##px; to set the line width. Replace ## with the number of pixels wide the line is. You can also use a percentage (%) instead of pixels (px).
    • Type height: ##px; to set the line thickness. Replace ## with the number of pixels thick the line is.
    • Type background-color: ##; to set the color of the line. Replace ## with the name of a color or a pound (#) followed by a hexadecimal color code.
    • Type margin-right: ##px; to set the number of pixels from the right edge. Replace ## with the number or pixels or "auto". Using "auto" will center the line within it's specified width. The remaining space will be split evenly between the left and right margins.
    • Type margin-left: ##px; to set the number of pixels from the left edge. Replace ## with the number or pixels or "auto". Using "auto" will center the line within it's specified width. The remaining space will be split evenly between the left and right margins.[2]
    • Type margin-top: ##px; to set a top margin for the line. Replace ## with the number or pixels thick the margin is.
    • Type margin-bottom: ##px; to set a bottom margin for the line. Replace ## with the number pixels thick the margin is.
    • Type border-width: ##px; to create a border around the line (optional). Replace ## with the number of pixels thick the border is.
    • Type border-color: ##; to set the border color (optional). Replace ## with the name of a color, or a pound sign (#) followed by a hexadecimal color code.
  6. Image titled 658928 14 1
    6
    Type } after the style settings. This closes your style settings for your <hr> tag.
  7. 7
    Press ↵ Enter and type </style>. This creates a new line and then adds the tag to close the style section of your HTML. The "</style>" goes after you have added all the HTML elements you with to style with CSS.
  8. 8
    Type <hr> anywhere in the body of your HTML document. The body of your HTML tag is the area in between the "<body>" and "</body>" tags. This adds a horizontal line to your HTML document. Your CSS style settings will apply anytime you use the <hr> tag in your HTML.
  9. Image titled 658928 7 1
    9
    Save your HTML file. To save a text file as an HTML document, you need to replace the file extension (.txt, .docx) with ".html". Use the following steps to save your HTML document:
    • Click the File menu.
    • Click Save As if starting a new HTML file. Click Save to save an existing HTML file.
    • Type a name for the file next to "File name".
    • Type ".html" at the end of the file name.
    • Click Save.
  10. Image titled 658928 15 1
    10
    Test your HTML. To test your HTML file, right-click on the file and select Open with. Then select a web browser. A solid line should appear where you place the "hr" tag. Your HTML code should look something like this: 
      <!DOCTYPE html>
<html>
<head>
<style type="text/css">

hr {
width: 50%;
height: 20px;
background-color: red;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
margin-bottom: 5px;
border-width: 2px;
border-color: green;
}

</style>

</head>
<body>

<h1>This is a heading</h1>

<hr>

<p1>This is a paragraph text separated by a horizontal line</p1>

</body>
</html>
    11. Advertisement
Method 2
Method 2 of 2:

Using HTML 4.01

  1. Image titled 658928 1 1
    1
    Open or create a new HTML document. HTML documents can be edited using a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver. Use the following steps to open an HTML document in the program of your choice:
    • Open Notepad, or a text editor/code editor of your choice.
    • Click the File menu.
    • Click Open.
    • Select an HTML file.
    • Click Open.
  2. Image titled 658928 2 1
    2
    Select the point at which you want to insert the line. Scroll down until you find the space above which you want to insert the line, then click the far-left side of the line to place the cursor directly before the line's start.
  3. Image titled 658928 3 1
    3
    Press ↵ Enter twice to create a blank space. This moves down the text above which you want to enter the line.
  4. 4
    Move the cursor back to where you want to add a line. Simply click, or use the arrow keys on the keyboard to move the cursor back to where you want the line to go.
  5. Image titled 658928 4 1
    5
    Type <hr> into the space before the line begins. The "<hr>" tag is responsible for creating a horizontal line across the entire page.
  6. Image titled 658928 5 1
    6
    Press ↵ Enter to place the "<hr>" on it's own line. At this point, the <hr> tag should be on its own line with no other code to the left or right of it.
  7. Image titled 658928 6 1
    7
    Add attributes to the horizontal line (optional). You can add attributes to a horizontal line, such as length, width, color, and alignment. Use the following codes after "hr" in the code bracket. You can add more than one attribute in a bracket by separating them with a space.[3]
    • Type <hr size="#"> to change the thickness of the line. Replace # with the number of thickness (i.e size="10").
    • Type <hr width="#"> to change the line width. Replace # with the number of pixels wide, or percentage of the page width (i.e. width="200", or width="75%").
    • Type <hr color="#"> to change the color of the line. Replace # with the name of a color or hexadecimal code (i.e color="red" or color="#FF0000").
    • Type <hr align="#"> to align the line. Replace # with "right", "left", or "center" (i.e align="center">).
  8. Image titled 658928 7 1
    8
    Save your HTML file. To save a text file as an HTML document, you need to replace the file extension (.txt, .docx) with ".html". Use the following steps to save your HTML document:
    • Click the File menu.
    • Click Save As if starting a new HTML file. Click Save to save an existing HTML file.
    • Type a name for the file next to "File name".
    • Type ".html" at the end of the file name.
    • Click Save.
  9. Image titled 658928 8 1
    9
    Test your HTML. To test your HTML file, right-click on the file and select Open with. Then select a web browser. A solid line should appear where you place the "hr" tag. Your HTML code should look something like this:[4] 
      <!DOCTYPE html>
<html>
<body>

<h1>This is a Heading</h1>

<hr size="6" width="50%" align="left" color="green">

<p1>This is paragraph text that has been separated from the heading by a line.</p1>

</body>
</html>
    10. Advertisement

Community Q&A

  • Question
    Can we enter a header in an HTML program?
    Nicole Futoryansky
    Nicole Futoryansky
    Community Answer
    You can create a header with the tag, and then style it to look however you want.
  • Question
    How do I do flowcharting on HTML?
    Community Answer
    Community Answer
    Using CSS, you can create a bunch of divs containing text. Using the canvas element and some JS, you can create a flowchart image on your page. There are lots of w3schools tutorials to try. After you get far enough, you can read all about things like this on the Mozilla Developer Network.
Advertisement

You Might Also Like

Create a Simple Web Page with HTML
How to
Create a Simple Web Page with HTML
Run a HTML File in Visual Studio Code
How to
Run a HTML File in Visual Studio Code
Change the Button Color in HTML
How to
Change the Button Color in HTML
Insert Spaces in HTML
How to
Insert Spaces in HTML
Create an Email Link in HTML
How to
Create an Email Link in HTML
Write HTML Code
How to
Write HTML Code
Insert Images with HTML
How to
Insert Images with HTML
Run a HTML File
How to
Run a HTML File
Set a Background Image in HTML
How to
Set a Background Image in HTML
Add a Link to a Picture4 Ways to Add a Link to a Picture
Get the Hex Code of a Color on Your Computer Screen
How to
Get the Hex Code of a Color on Your Computer Screen
Add a Hyperlink with HTML
How to
Add a Hyperlink with HTML
Create a Calculator Using HTML
How to
Create a Calculator Using HTML
Align Something in HTML
How to
Align Something in HTML
Advertisement

References

  1. ↑ https://www.w3schools.com/tags/tag_hr.asp
  2. ↑ https://www.w3schools.com/css/css_margin.asp#:~:targetText=The%20auto%20Value,the%20left%20and%20right%20margins.
  3. ↑ http://www.myhtmltutorials.com/line.html
  4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

About This Article

Travis Boylls
Written by:
Travis Boylls
wikiHow Technology Writer
This article was co-authored by wikiHow staff writer, Travis Boylls. Travis Boylls is a Technology Writer and Editor for wikiHow. Travis has experience writing technology-related articles, providing software customer service, and in graphic design. He specializes in Windows, macOS, Android, iOS, and Linux platforms. He studied graphic design at Pikes Peak Community College. This article has been viewed 360,122 times.
How helpful is this?
Co-authors: 27
Updated: January 12, 2022
Views: 360,122
Categories: HTML
Article SummaryX

1. Open an HTML document in a text editor like Notepad.
2. Go to the body section of an HTML document.
3. Type < hr > where you want to add a horizontal bar.

Did this summary help you?
Advertisement