`<hr>` Элемент HTML для тематического разделителя (горизонтальной линии)

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в различных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Элемент <hr> HTML обозначает тематический разрыв между элементами уровня абзаца: например, смену сцены в рассказе или смену темы внутри раздела.

Попробуйте

<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>

<hr />

<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "§";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

Исторически элемент <hr> всегда отображался в виде горизонтального правила или линии. Хотя в визуальных браузерах он по-прежнему может отображаться как горизонтальная линия, теперь этот элемент определяется семантически, а не с точки зрения представления. Поэтому, если вы хотите нарисовать горизонтальную линию, следует добавить границу к существующему элементу с помощью CSS.

Свойства border-* (например, border-style и border-color) позволяют значительно настраивать внешний вид линии — как при настройке элемента <hr>, так и при создании границы другого элемента.

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

align: Задаёт выравнивание линии на странице. Если значение не указано, используется значение по умолчанию left.
color: Задаёт цвет линии с помощью названия цвета или шестнадцатеричного значения.
noshade: Задаёт отображение линии без затенения.
size: Задаёт высоту линии в пикселях.
width: Задаёт длину линии на странице в пикселях или процентах.

Пример

HTML

<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>

<hr />

<p>
  This is the second paragraph of text. This is the second paragraph of text.
  This is the second paragraph of text. This is the second paragraph of text.
</p>

Результат

Техническая сводка

Категории содержимого	Потоковое содержимое.
Допустимое содержимое	Отсутствует; это пустой элемент.
Опускание тегов	Необходимо указать начальный тег; конечный тег указывать нельзя.
Допустимые родительские элементы	Любой элемент, допускающий потоковое содержимое элемент `<select>`
Неявная роль ARIA	`separator`
Допустимые роли ARIA	`presentation` или `none`
Интерфейс DOM	`HTMLHRElement`

Спецификации

Спецификация
HTML> # the-hr-element>

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

	Компьютер					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android	WebView в iOS
`hr`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1
`align`	1	12	1	≤12.1	≤4	18	4	≤12.1	≤3.2	1.0	4.4	≤3.2
`color`	33	12	1	20	10.1	33	4	20	10.3	2.0	4.4.3	10.3
`hr_in_select`	119 ["Визуально отображает `<hr>` на странице только при раскрытом меню (перемещение стрелками в свёрнутом меню их не показывает).", "Не отображает `<hr>` в дереве доступности."]	119 ["Визуально отображает `<hr>` на странице только при раскрытом меню (перемещение стрелками в свёрнутом меню их не показывает).", "Не отображает `<hr>` в дереве доступности."]	122 Не отображает `<hr>` в дереве доступности.	105 ["Визуально отображает `<hr>` на странице только при раскрытом меню (перемещение стрелками в свёрнутом меню их не показывает).", "Не отображает `<hr>` в дереве доступности."]	17 Не отображает `<hr>` в дереве доступности.	Нет	145	Нет	17.4 Не отображает `<hr>` в дереве доступности.	Нет	Нет	17.4 Не отображает `<hr>` в дереве доступности.
`noshade`	1	12	1	≤12.1	≤4	18	4	≤12.1	≤3.2	1.0	4.4	≤3.2
`size`	1	12	1	≤12.1	≤4	18	4	≤12.1	≤3.2	1.0	4.4	≤3.2
`width`	1	12	1	≤12.1	≤4	18	4	≤12.1	≤3.2	1.0	4.4	≤3.2

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/hr

<hr> Элемент HTML для тематического разделителя (горизонтальной линии)