How to Create a Horizontal Line in HTML

PDF download Download Article
Create a horizontal line in HTML and style it with in-line HTML or CSS
PDF download Download Article

Are you learning HTML ? Do you want to add a horizontal line to your web page ? A horizontal line—also known as a horizontal rule—can be used to separate blocks of text or other content on your website. Adding a horizontal line in HTML is really easy. You can also style the horizontal line using CSS or in-line HTML attributes. This allows you to change the line thickness, alignment , or color . This wikiHow teaches you how to add and style a horizontal line in HTML and CSS. [1]

Method 1
Method 1 of 2:

Using CSS

PDF download Download Article
  1. HTML documents can be edited using a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver or Visual Studio Code . 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. 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 section.
    Advertisement
  3. The style tag goes in between the opening and closing head tags. This creates a section where you can input CSS code to style your HTML.
    • Alternatively, you can use an external CSS file to style your HTML.
  4. 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.
    • Alternatively, you can define a class style to create different styles for your horizontal lines.
  5. These go after the "hr {" tag. There are many ways you can style a horizontal line. The following are a few examples.
    • Width: 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).
    • Height: Type height: ##px; to set the line thickness. Replace "##" with the number of pixels thick the line is.
    • Color: Type background-color: ##; to set the color of the line. Replace "##" with the name of a color or add a pound (#) followed by a hexadecimal color code .
    • Right Margin: Type margin-right: ##px; to set the number of pixels from the right edge. Replace "##" with the number of pixels or "auto". Using "auto" will center the line within its specified width. The remaining space will be split evenly between the left and right margins.
    • Left Margin: Type margin-left: ##px; to set the number of pixels from the left edge. Replace "##" with the number of pixels or "auto". Using "auto" will center the line within its specified width. The remaining space will be split evenly between the left and right margins. [2]
    • Top Margin: Type margin-top: ##px; to set a top margin for the line. Replace "##" with the number of pixels thick the margin is.
    • Bottom Margin: Type margin-bottom: ##px; to set a bottom margin for the line. Replace "##" with the number of pixels thick the margin is.
    • Border: Type border-width: ##px; to create a border around the line (optional). Replace "##" with the number of pixels thick the border is.
    • Border Color: Type border-color: ##; to set the border color (optional). Replace "##" with the name of a color, or add a pound sign (#) followed by a hexadecimal color code.
  6. This closes your style settings for your <hr> tag.
  7. 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 style elements for your HTML document.
  8. 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.
    • If you have defined a style class for your horizontal line, type {{kbd|<div class="[class_name]"></div>} instead. Replace "[class_name]" with the name of the class that you defined. </li
  9. 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".
    • Delete the file extension at the end (".txt," ".docx," etc)
    • Replace the file extension with ".html."
    • Click Save .
  10. 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 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 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 In-Line HTML

PDF download Download Article
  1. HTML documents can be edited using a text editor such as Notepad. You can also use a code editor, such as Adobe Dreamweaver or Visual Studio Code . 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. You can insert a horizontal line in the "<body>" section of an HTML document. 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 start.
  3. This moves down the text above which you want to enter the line.
  4. Simply click, or use the arrow keys on the keyboard to move the cursor back to where you want the line to go.
  5. The "<hr>" tag is responsible for creating a horizontal line across the entire page. Using this tag by itself will create a basic horizontal line.
  6. At this point, the <hr> tag should be on its own line with no other code to the left or right of it.
  7. If you want to style your horizontal line, you can do so using in-line HTML. To style your horizontal line, type "style=" after "hr" inside the "<hr>" tag (i.e. <hr style=>.
  8. If you want to add style attributes, add them after "style=" in quotation marks within the "<hr>" tag. The style attributes are the same as CSS style attributes. You can include as many attributes as want. Separate each attribute with a semi-colon (;) except the last attribute. The following are some style attributes you can add:
    • Width: 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).
    • Height: Type height: ##px to set the line thickness. Replace "##" with the number of pixels thick the line is.
    • Color: 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 .
    • Alignment: Type text-align:## to set an alignment for your horizontal rule. Replace "##" with "left," "right," or "center."
    • Right Margin: Type margin-right: ##px to set the number of pixels from the right edge. Replace "##" with the number of pixels or "auto". Using "auto" will center the line within its specified width. The remaining space will be split evenly between the left and right margins.
    • Left Margin: Type margin-left: ##px to set the number of pixels from the left edge. Replace "##" with the number of pixels or "auto". Using "auto" will center the line within its specified width. The remaining space will be split evenly between the left and right margins. [3]
    • Top Margin: Type margin-top: ##px to set a top margin for the line. Replace "##" with the number of pixels thick the margin is.
    • Bottom Margin: 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. Replace "##" with the number of pixels thick the border is.
    • Type border-color: ## to set the border color. Replace "##" with the name of a color, or a pound sign (#) followed by a hexadecimal color code.
  9. To save a text file as an HTML document , you need to replace the file extension (".txt," ".docx," etc) 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."
    • Delete the file extension (".txt," ".docx," etct)
    • Replace the file extension with ".html."
    • Click Save .
  10. 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 the following: [4] 
       <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
This is a Heading </ 
 h1 
 > 
 < 
 hr 
 style 
 = 
 "width:" 
 50 
 %; 
 text-align:left 
 ; 
 background-color:green 
 " 
 > 
 < 
 p1 
 > 
This is paragraph text that has been separated from the heading by a line. </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 >
    11. Advertisement

Community Q&A

Search
Add New Question
  • Question
    Can we enter a header in an HTML program?
    Community Answer
    You can create a header with the tag, and then style it to look however you want.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 8 Helpful 1
  • Question
    How do I do flowcharting on HTML?
    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.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 11 Helpful 1
  • Question
    I want to draw a dotted line on my web page
    GreenJarsWithSmallLabels
    Community Answer
    If you are using the method to draw the line, using the following CSS (enclosed in tags) should have the desired effect: hr{background: none; border: none; border-bottom: 1px dotted black;} You can change "1px" to a different number of pixels to change the width, or "black" to a preferred colour. Using "dashed" instead of "dotted" will also create a slightly different effect.
    Thanks! We're glad this was helpful.
    Thank you for your feedback.
    If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
    Yes No
    Not Helpful 0 Helpful 0
Ask a Question
200 characters left
Include your email address to get a message when this question is answered.
Submit
      Advertisement

      Tips

      Submit a Tip
      All tip submissions are carefully reviewed before being published
      Name
      Please provide your name and last initial
      Submit
      Thanks for submitting a tip for review!

      You Might Also Like

      4 Ways to Add a Link to a Picture
      How to
      Run a HTML File in Visual Studio Code
      How to
      Insert Spaces in HTML
      How to
      Create a Simple Web Page with HTML
      How to
      Write HTML Code
      How to
      Run a HTML File
      How to
      Insert Images with HTML
      How to
      Change the Button Color in HTML
      Add a Background Image to a Website: Step-by-Step Tutorial
      How to
      Open HTM Files
      Simple Ways to Find the Hex Code of Any Color on Your Computer
      How to
      Resize iFrames in HTML
      How to
      Make a Birthday Card with HTML and CSS
      How to
      Copy HTML Source Code on Your Computer, iPhone, or Android
      Advertisement

      References

      1. ↑ https://www.w3schools.com/tags/tag_hr.asp
      2. ↑ https://www.w3schools.com/css/css_margin.asp
      3. ↑ https://www.w3schools.com/css/css_margin.asp
      4. ↑ https://www.w3schools.com/TAGS/tag_hr.asp

      About This Article

      Article Summary X

      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?
      In other languages
      Thanks to all authors for creating a page that has been read 390,094 times.

      Is this article up to date?

      Advertisement