Тег <hr>
Описание
Тег <hr> (от англ. "horizontal rule") создает тематический раздел между контентом в виде горизонтальной линии. Это самозакрывающийся элемент, который не требует парного тега.
<section>
<h2>Преимущества нашего сервиса</h2>
<p>Описание основных возможностей...</p>
<hr>
<h2>Тарифные планы</h2>
<p>Сравнение доступных вариантов...</p>
</section>
<style>
hr.custom {
height: 3px;
background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
border: none;
margin: 2rem 0;
}
</style>
<hr class="custom">
Ключевые особенности:
- Семантически обозначает тематический разрыв контента
- По умолчанию отображается как тонкая серая линия с отступами
- Не содержит текстового контента
- Может быть стилизован с помощью CSS
- Доступен для скринридеров как разделитель
Рекомендации по использованию:
- Используйте для логического разделения крупных блоков
- Избегайте чисто декоративного применения (лучше border в CSS)
- Для форм используйте семантические разделители (fieldset)
- Добавляйте
aria-hidden="true"для декоративных линий - Экспериментируйте с CSS для создания уникальных разделителей
Тег <hr> является семантическим разделителем контента, который следует использовать осмысленно, а не как чисто декоративный элемент.
Атрибуты
| accesskey | Горячая клавиша для активации элемента |
| class | CSS-классы для стилизации элемента |
| contenteditable | Разрешает редактирование содержимого |
| data-* | Пользовательские данные элемента |
| dir | Направление текста (ltr|rtl) |
| hidden | Скрывает элемент |
| id | Уникальный идентификатор элемента |
| lang | Язык содержимого элемента |
| spellcheck | Включает проверку орфографии |
| style | Инлайновые CSS-стили элемента |
| tabindex | Порядок перехода при навигации по Tab |
| title | Всплывающая подсказка для элемента |
| translate | Определяет возможность перевода содержимого |
| align | Горизонтальное выравнивание (устарел в HTML5) |
| color | Цвет линии (устарел в HTML5) |
| noshade | Убирает тень у линии (устарел в HTML5) |
| size | Толщина линии (устарел в HTML5) |
| width | Ширина линии (устарел в HTML5) |
Поддержка браузерами
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 3.0 | 1.0 | 3.0 | 1.0 | 1.0 |