- : The Thematic Break (Horizontal Rule) element
- Attributes
- Example
- HTML
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Как добавить горизонтальную линию в HTML
- Работа в HTML 4.01
- Работа в CSS/HTML5
- HTML Horizontal Line – HR Tag Example
- Table of Contents
- Basic Syntax
- Attributes of Tag
- The Width Attribute
- The Color Attribute
- The Size Attribute
- The Align Attribute
- Conclusion
- Создать горизонтальную линию html
- Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
: The Thematic Break (Horizontal Rule) element
Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.
Content categories | Flow content. |
---|---|
Permitted content | None, it is an empty element. |
Tag omission | It must have start tag, but must not have an end tag. |
Permitted parents | Any element that accepts flow content. |
Implicit ARIA role | separator (en-US) |
Permitted ARIA roles | presentation (en-US) or none (en-US) |
DOM interface | HTMLHRElement (en-US) |
Attributes
This element’s attributes include the global attributes.
Задаёт правило выравнивания.По умолчанию значение выставлено как left
Sets the rule to have no shading.
Устанавливает высоту в px
Задаёт длину линии в px либо в %
Example
HTML
p> Это первый параграф текста Это первый параграф текста Это первый параграф текста Это первый параграф текста p> hr /> p> Это второй параграф текста Это второй параграф текста Это второй параграф текста Это второй параграф текста p>
Result
Specifications
Specification | Status | Comment |
---|---|---|
HTML Living Standard Определение ‘ ‘ в этой спецификации. | Живой стандарт | Definition of the element |
HTML5 Определение ‘ ‘ в этой спецификации. | Рекомендация | |
HTML 4.01 Specification Определение ‘ ‘ в этой спецификации. | Рекомендация | The align , noshade , size , and width attributes are deprecated |
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on 8 февр. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Как добавить горизонтальную линию в HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество просмотров этой статьи: 26 242.
Из этой статьи вы узнаете, как добавить горизонтальную линию в HTML. Горизонтальную линию можно использовать для разделения контента на сайте. Код для создания линии достаточно прост. Тем не менее в HTML 4.01 можно изменить дизайн линии с помощью внутренних команд. В HTML5 для стилизации линии придется использовать CSS. [1] X Источник информации
Работа в HTML 4.01
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
Выберите место, в которое нужно вставить линию. Пролистайте вниз, пока не найдете строку, над которой должна появиться линия, а затем переместите курсор непосредственно в начало этой строки, щелкнув мышью в ее крайней левой части.
Добавьте пустую строку. Дважды нажмите ↵ Enter , чтобы опустить вниз текст, перед которым нужно вставить линию, после чего поместите курсор на пустую строку.
Добавьте тег
. Введите
в пустое место в начале строки. Тег позволяет нарисовать горизонтальную линию через всю страницу.
Переместите курсор после тега «hr» на новую строку, нажав ↵ Enter . Теперь тег должен находиться в отдельной строке.
- Введите
, чтобы изменить толщину линии. Замените «#» числовым значением толщины (например, size=»10″). - Введите
, чтобы изменить ширину линии. Замените «#» количеством пикселей или процентным отношением к ширине страницы (например, width=»200″ или width=»75%»). - Введите
, чтобы изменить цвет линии. Замените «#» названием цвета или его шестнадцатеричным кодом (например, color=»red» или color=»# FF0000″). - Введите
, чтобы выровнять линию. Замените «#» на «right» (по правому краю), «left» (по левому краю) или «center» (по центру) (например,
).
- Откройте меню Файл.
- Нажмите Сохранить как.
- Введите имя для файла в поле «Имя файла».
- Добавьте .html после имени файла.
- Нажмите Сохранить.
html> body> h1>Заголовокh1> hr size="6" width="50%" align="left" color="green"> p1>Данная строка должна быть отделена от заголовка линией.p1> body> html>
Работа в CSS/HTML5
- Откройте Блокнот или другой текстовый редактор/редактор кода.
- Откройте меню Файл.
- Нажмите Открыть.
- Выберите файл HTML.
- Нажмите Открыть
- Введите в верхней части документа.
- Дважды нажмите ↵ Enter , чтобы добавить две новые строки.
- Введите , чтобы закрыть заголовок.
- В качестве альтернативного способа можно использовать внешнюю таблицу стилей. Прочтите статью «Как вставить файл CSS в HTML», чтобы узнать, как связать внешний файл CSS с файлом HTML.
Введите hr < .Это тег CSS для стилизации горизонтальной линии. Добавьте его после тега «style» в заголовке или во внешнем файле CSS.
- Введите width: ##px; , чтобы настроить ширину линии. Замените «##» значением ширины линии в пикселях. Вместо пикселей (px) можно использовать процентное отношение (%).
- Введите height: ##px; , чтобы настроить толщину линии. Замените «##» значением толщины линии в пикселях.
- Введите background-color: ##; , чтобы указать цвет линии. Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
- Введите margin-right: ##px; , чтобы указать количество пикселей от правого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по левому краю или по центру.
- Введите margin-left: ##px; , чтобы указать количество пикселей от левого края. Замените «##» числовым количеством пикселей или кодом «auto». Введите «auto», чтобы выровнять линию по правому краю или по центру.
- Введите margin-top: ##px; , чтобы указать верхний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите margin-bottom: ##px; , чтобы указать нижний отступ для линии. Замените «##» числом, соответствующим ширине отступа в пикселях.
- Введите border-width: ##px; , чтобы нарисовать рамку вокруг линии (необязательно). Замените «##» числом, соответствующим толщине рамки в пикселях.
- Введите border-color: ##; , чтобы указать цвет рамки (необязательно). Замените «##» названием цвета или решеткой (#), после которой будет идти шестнадцатеричный код цвета.
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>Заголовокh1> hr> p1>Данная строка должна быть отделена от заголовка горизонтальной линией p1> body> html>
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.
Создать горизонтальную линию html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как сделать горизонтальную линию HTML. Основы HTML для начинающих. Урок №10
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать горизонтальную линию в HTML.
С помощью горизонтальной линии можно аккуратно выделить меню, название заголовка, подчеркнуть комментарий. А бывает, смотришь на страничку, и чего-то не хватает, добавляешь горизонтальную линию – и вид странички значительно улучшается!
Поэтому, не стоит пропускать этот урок, если он вам показался примитивным и слишком простым. Я думаю, вы на практике сами все увидите и останетесь довольными, что не пропустили этот урок.
Чтобы создать горизонтальную линию в HTML, существует специальный тег:
Атрибуты горизонтальной линии
○ ширина горизонтальной линии
Чтобы регулировать ширину, достаточно прописать к тегу «HR» атрибут «width» с размерами. Размеры задаются в пикселях ( px ) либо в процентах ( % ):
○ толщина горизонтальной линии
Чтобы задать толщину горизонтальной линии, достаточно прописать к тегу «HR» атрибут «size» с размером:
○ выравнивание горизонтальной линии
Чтобы выровнять горизонтальную линию по центру, справа или слева, достаточно прописать к тегу «HR» атрибут «align» с такими значениями:
«right» – вправо;
«center» – по центру;
«left» – слева (по умолчанию).
○ отменить объемность горизонтальной линии
Чтобы отменить объемность горизонтальной линии, достаточно прописать к тегу «HR» «NoShade» :
○ цвет горизонтальной линии
Чтобы задать цвет горизонтальной линии, пропишите к тегу «HR» атрибут «color» с кодом цвета (кодировку цветов мы еще не изучали, но вскоре будем):
На сегодня это все! Жду вас на следующем уроке. Удачи!