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,938 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 линия горизонтальная и вертикальная
Данный урок научит вас создавать горизонтальные и вертикальные линии.
- Горизонтальная HTML линия определяется непарным тегом
.
- HTML линия может быть не только горизонтальной, но и вертикальной.
- Вертикальная линия в HTML может являться стороной блока или ячейки таблицы.
- Линия в HTML бывает любого размера и цвета, имеет или не имеет объемность.
HTML горизонтальная линия и пример ее построения:
| |
- align=»» – выравнивает линию справа или слева.
- width=»50%» – ширина в пикселях или процентах.
- size=»» – задает толщину горизонтальной линии.
- color=»#00ff00″ – устанавливает цвет линии.
HTML линия может быть разной:
Вертикальная HTML линия и способы ее построения
Вертикальная линия в HTML отображается как сторона блока или таблицы.
Пример построения вертикальной линии:
|
Пример вертикальной линии красного цвета слева. |
В данном случае вертикальная HTML линия является стороной отформатированного блока.
Обычный блок с помощью стилевых описаний видоизменен до неузнаваемости. Хотите научиться так манипулировать элементами страницы – учите CSS, а что касается конкретно этого кода, то следует обратить внимание на стилевой атрибут border-left и его значения.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML блоки и параграфы 
HTML линии 
Фон HTML страницы
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML, линия? – Не вопрос!
How to create a partial-horizontal line in HTML?
I would like to create a thin line below the main heading in a webpage, which is centered, something like this. How do I go about it as using /hr will create an end-to-end line.
6 Answers 6
In your example this is done with css and not with a hr-tag So either you can use the css-style border-bottom as in your example, or you indeed can use a hr-tag which you give some CSS, e.g.:
If you want to position the hr, you may need the position-style. You can try this easily on the w3c example site.
Remember, that the hr-width-attribute (not the style!) is not working under html5 anymore.
You can use HR tag or HR tag with simple css code
Here HR tag with simple css code:
Note: The attributes that aren’t supported in the HTML5 spec are all related to the tag’s appearance. The appearance should be set in CSS, not in the HTML itself.
So use the
tag without attributes, then style it in CSS to appear the way you want.
@GCyrillus To be more precise, it’s been deprecated and only obsolete since last December. The align attributes, too, have been deprecated and possibly obsolete.
Or in the example you gave it is using css property of the div with a bottom border
Except the width attribute has been eliminated as of HTML5 making it obsolete. developers.whatwg.org/obsolete.html#obsolete
you can restyle and add margin to your hr
Any content before
any content after
width a fixed width margin is involved too
Any content before
any content after
You can also use the border-bottom of any tag .
Any content before
any content after
The hr style settings are to be done in CSS not in the body.
Edit: I used width to control the length of the horizontal line that will appear below my heading or text. Margin-left and margin-right :auto, automatically placed the line in the center where as normally the line would begin at one end of the page and end in another.