Что такое hr в html
Перейти к содержимому

Что такое hr в html

  • автор:

HTML тег hr

Тег определяет тематический разрыв контента на HTML странице (например, изменение темы). Также, элемент может использоваться для визуального разделения контента на странице.

Разница между HTML 4.01 и HTML5

В HTML 4.01 тег представляет горизонтальную линию.

В HTML5 тег определяет тематический разрыв. Тем не менее, тег в визуальных браузерах все еще может отображаться как горизонтальная линия, однако в настоящее время он определяется в семантическом, а не презентативном смысле.

В HTML5 все стилевые атрибуты были удалены. Вместо них следует использовать стили CSS.

Различия между HTML и XHTML

В HTML тег — одиночный элемент без закрывающего тега. В XHTML тег должен закрываться должным образом, а именно —


.

Атрибуты тега

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента hr
noshade Определяет, что горизонтальная линия не должна иметь тень
size Определяет высоту горизонтальной линии
width Определяет ширину горизонтальной линии
Общие атрибуты
CSS стили по умолчанию

Большинство браузеров будут отображать тег


со следующими стилями

HTML пример использования

Используем тег


для тематического разделения контента:

 

HTML

HTML – язык описания веб-страниц.


CSS

CSS — определяет то, как будут отображаться HTML элементы.

Что такое hr в html

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Та самая горизонтальная черта, которая разделяет смысловые блоки на странице.

Пример

Скопировать ссылку «Пример» Скопировано

Разделим два абзаца горизонтальной чертой и немного стилизуем её.

 

Слово «динозавр» означает.

Среди палеонтологов.

p>Слово «динозавр» означает. p> hr> p>Среди палеонтологов. p>
 hr  width: 50px; margin: 30px auto; border: 1px solid black;> hr  width: 50px; margin: 30px auto; border: 1px solid black; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Тег


помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Одиночный тег, который не нужно закрывать — просто ставим


в том месте, где нужен разделитель.

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

�� Конечно же, перед заголовком не стоит ставить


— заголовок сам по себе является тематическим и визуальным разделителем.

�� Внешний вид тега


по умолчанию обусловлен именно наличием рамки, поэтому для изменения, например, цвета линии достаточно изменить border — color .

Светлана Коробцева советует

Скопировать ссылку «Светлана Коробцева советует» Скопировано

�� Дизайнеры любят пользоваться линией как средством выразительности. Почти никогда такая линия не является смысловым разделителем, и поэтому не стоит верстать её как


. Пользуйтесь этим тегом в том случае, когда без разделителя информация теряет смысл или в ней становится трудно разобраться.

В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент : : after , а разделяющий визуально одинаковые, но разные по смыслу абзацы


представлен в виде звёздочек.

 Типографика

Астеризм

Астеризм это типографский символ.

Одиночная звёздочка.

span class="tag">Типографикаspan> h1 class="title">Астеризмh1> p class="paragraph">Астеризм это типографский символ. p> hr> p class="paragraph">Одиночная звёздочка. p>
 .tag, .title  position: relative;> .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black;> .tag::after  height: 1px;> .title::after  height: 2px;> hr  border: none; text-align: center;> hr::before  content: "***";> .tag, .title  position: relative; > .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black; > .tag::after  height: 1px; > .title::after  height: 2px; > hr  border: none; text-align: center; > hr::before  content: "***"; >      

Тег hr

Тег hr задает разделительную горизонтальную линию. Преимущество тега в том, что для того, чтобы провести одиночную линию, не требуется создавать лишних блоков. Не требует закрывающего тега.

Пример

Давайте посмотрим, как работает тег hr :

Пример

Давайте попробуем поменять цвет линии с помощью CSS свойства border-color :

Пример

Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):

Пример

Давайте теперь поменяем цвет линии с помощью CSS свойства border . Обратите внимание на то, что при этом линия станет двойной толщины (так как мы задали границу и сверху, и снизу):

Пример

Попробуем поменять цвет линии с помощью CSS свойства border-top , и зададим только верхнюю границу. Теперь двойной линии не будет:

Пример

Давайте сделаем линию в виде точек с помощью CSS свойства border-top , зададим значение dotted вместо solid :

Пример

Давайте увеличим толщину линии с помощью CSS свойства border-width :

Пример

А теперь давайте линии добавим высоту height и границу через border . Граница при этом распадется на верхнюю и нижнюю:


: 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
HTML Standard
# the-hr-element

Совместимость с браузерами

BCD tables only load in the browser

See also

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *