<hr> – Елемент тематичного розриву (горизонтальна лінія)
Елемент HTML <hr>
(horizontal rule - горизонтальна лінія) служить для розділення елементів рівня абзацу: наприклад, коли змінюється сцена в історії, чи тема всередині розділу.
Спробуйте його в дії
Історично цей елемент зображався як горизонтальна лінійка чи лінія. Позаяк він все ще може мати вигляд горизонтальної лінії у візуальних браузерах, цей елемент тепер має більше семантичний зміст, аніж візуальний. Отже, якщо потрібно просто провести горизонтальну лінію, слід робити це за допомогою відповідного CSS.
Атрибути
Серед атрибутів цього елемента присутні глобальні атрибути.
align
Задає шикування лінії на сторінці. Якщо значення не задано, то усталеним значенням є
left
.color
Задає колір лінії за допомогою назви кольору або шістнадцяткового значення.
noshade
Задає лінії відсутність тіні.
size
Задає висоту лінії в пікселях.
width
Задає довжину лінії на сторінці, за допомогою значення в пікселях або відсотках.
Приклад
HTML
<p>
Це перший абзац тексту. Це перший абзац тексту. Це перший абзац тексту. Це
перший абзац тексту.
</p>
<hr />
<p>
Це другий абзац тексту. Це другий абзац тексту. Це другий абзац тексту. Це
другий абзац тексту.
</p>
Результат
Технічний підсумок
Категорії вмісту | Потоковий вміст. |
---|---|
Дозволений вміст | Жодного; це пустий елемент. |
Пропуск тега | Повинен мати початковий тег і не мати кінцевого. |
Дозволені батьківські елементи |
|
Неявна роль ARIA | separator |
Дозволені ролі ARIA |
presentation або жодної ролі
|
Інтерфейс DOM | HTMLHRElement |
Специфікації
Специфікація |
---|
HTML Standard (HTML) # the-hr-element |
Сумісність із браузерами
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
hr
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 5.5 | Opera Full support 12.1 | Safari Full support 3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 1 | Samsung Internet Full support 1.0 |
align
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
color
|
Chrome Full support 33 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 20 | Safari Full support 10.1 | WebView Android Full support 4.4.3 | Chrome Android Full support 33 | Firefox for Android Full support 4 | Opera Android Full support 20 | Safari on iOS Full support 10.3 | Samsung Internet Full support 2.0 |
noshade
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
size
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |
width
|
Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | Internet Explorer Full support 6 | Opera Full support 12.1 | Safari Full support 4 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox for Android Full support 4 | Opera Android Full support 12.1 | Safari on iOS Full support 3 | Samsung Internet Full support 1.0 |