Тег <hr>
Тег <hr> (укр. — “горизонтальна лінія” або “тематичний розрив”) в HTML використовується для візуального розділення контенту на логічні частини. Семантично він позначає перехід до нової теми або зміни контексту в документі. У сучасній HTML5-специфікації <hr> вважається тематичним роздільником, а не просто декоративною лінією.
Тег є самозакривальним.
Атрибути
Специфічні атрибути
Тег <hr> не має специфічних (унікальних) атрибутів.
Глобальні атрибути
Тег <hr> підтримує всі глобальні атрибути HTML:
- id — унікальний ідентифікатор. Наприклад:
<hr id="section-divider">- class — для CSS-стилізації. Наприклад:
<hr class="divider">- style — для інлайн-стилів. Наприклад:
<hr style="border: 2px dashed #ccc;">- title — підказка при наведенні. Наприклад:
<hr title="Перехід до нової теми">- lang — вказує мову (практично не використовується для цього тега). Наприклад:
<hr lang="uk">Приклад використання
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання hr</title>
<style>
.divider {
border: none;
height: 3px;
background: linear-gradient(to right, #4CAF50, #81C784);
margin: 30px 0;
}
</style>
</head>
<body>
<h2>Розділ 1</h2>
<p>Це перший розділ тексту.</p>
<hr class="divider">
<h2>Розділ 2</h2>
<p>Це другий розділ тексту після тематичного розділення.</p>
<hr style="border: 1px solid #000;">
<h2>Розділ 3</h2>
<p>Це третій розділ з простим роздільником.</p>
</body>
</html>Додаткові моменти
- Семантично означає зміну теми або перехід між логічними частинами тексту.
- У HTML5 має саме смислове значення, а не лише декоративне.
- Може бути повністю стилізований через CSS: товщина, колір, стиль лінії, тіні тощо.
- Підтримує гнучке використання в лендингах, документації, блогах, статтях.
- Сам по собі не містить контенту (порожній самозакривальний тег).
- Повністю підтримується всіма сучасними браузерами.
