How to Create a Horizontal Line in HTML
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.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 373,678 times.
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] X Research source
Using CSS
- Open Notepad, or a text editor/code editor of your choice.
- Click the File menu.
- Click Open.
- Select an HTML file.
- Click Open.
- Type at the top of the document.
- Press the Enter key twice to add two new lines.
- Type to close the head section.
- 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] X Research source
- 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.
Press ↵ Enter and type
. This creates a new line and then adds the tag to close the style section of your HTML. The «
» goes after you have added all the style elements for your HTML document.
- If you have defined a style class for your horizontal line, type > instead. Replace «[class_name]» with the name of the class that you defined.
- 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.
html> head> style> 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 headingh1> hr> p1>This is a paragraph text separated by a horizontal linep1> body> html> Using In-Line HTML
- Open Notepad, or a text editor/code editor of your choice.
- Click the File menu.
- Click Open.
- Select an HTML file.
- Click Open.
Select the point at which you want to insert the line. You can insert a horizontal line in the «» 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.
Press ↵ Enter twice to create a blank space. This moves down the text above which you want to enter the line.
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.
Type
into the space before the line begins. The «
» tag is responsible for creating a horizontal line across the entire page. Using this tag by itself will create a basic horizontal line.
Press ↵ Enter to place the «
» on it’s own line. At this point, the tag should be on its own line with no other code to the left or right of it.
Type style= in the «
» tag (optional). 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 «
» tag (i.e.
.
- 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] X Research source
- 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.
- 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.
html> body> h1>This is a Headingh1> 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> Community Q&A
Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift 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
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.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift 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
If you are using the method to draw the line, using the following CSS (enclosed in tags) should have the desired effect: hr
Thanks! We’re glad this was helpful.
Thank you for your feedback.
As a small thank you, we’d like to offer you a $30 gift card (valid at GoNift.com). Use it to try out great new products and services nationwide without paying full price—wine, food delivery, clothing and more. Enjoy! Claim Your Gift 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
HTML Horizontal Line – HR Tag Example
Kolade Chris
You can use the HTML
tag to separate out different topics on a page.
We often use this tag when we want to create a thematic break or separate items on an HTML page.
In this article, you’ll learn how to use this tag in your HTML code.
Table of Contents
- Basic Syntax
- Attributes of
Tag
- The Width Attribute
- The Color Attribute
- The Size Attribute
- The Align Attribute
- Conclusion
Basic Syntax
The
tag is an empty element. This means that it only has an opening tag,
.
Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just
, you should make it
.
In browsers, the
tag is displayed as a horizontal rule or line, like this:
Attributes of
Tag
The
tag accepts attributes such as width , color , size , and align .
Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:
The Width Attribute
The width attribute is used for specifying a width for the
tag. It takes pixels or percentage as a value.
The Color Attribute
The color attribute is used to specify a color for the
tag.
Here is how it would look if we set a green color for the
tag:
The Size Attribute
You can define a height for the
tag with the size attribute. The value must be set in pixels.
A height of 50px looks like the screenshot below:
The Align Attribute
The align attribute is used to set an alignment for the
tag. It takes left , center and right values.
The default is left – meaning if an alignment is not set, the
tag automatically aligns to the left.
Setting an alignment of right for the
tag looks like this:
Conclusion
This article shows you what the
tag looks like, what it is used for, and the attributes it accepts.
Since the
tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.
But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div or span as the case may be.
If you find this article helpful, share it with your friends and family.
Kolade Chris
Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.
If you read this far, tweet to the author to show them you care. Tweet a thanks
Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started
freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)
Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.
Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.