<hr>

Что делает тег

Тег <hr> создаёт видимую горизонтальную линию, разделяющую содержимое веб-страницы. Это самозакрывающийся тег.

Синтаксис тега <hr>

<! -- Какой-то текст или элемент-->
<hr>
<! -- Какой-то текст или элемент-->

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

Тег <hr> является частью спецификации HTML Living Standard.

Семантический или нет

Тег <hr> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

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

Простой разделитель:

<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr>
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p> 
<hr>
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>

Стилизованный разделитель:

<style>
  hr {
    height: 5px;
    background-color: blue;
    border: none;
  }
</style>
<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr>
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p>
<hr>
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>

Разделитель в навигационном меню:

<nav>
  <ul>
    <li><a href="#">Дома</a></li>
    <hr>
    <li><a href="#">О нас</a></li>
    <hr>
    <li><a href="#">Контакты</a></li>
    <hr>
  </ul>
</nav>

Можно улучшить доступность веб-страницы, если добавить тегу атрибут aria-hidden="true":

<h2>Раздел 1</h2>
<p>Это первый раздел веб-страницы.</p>
<hr aria-hidden="true">
<h2>Раздел 2</h2>
<p>Это второй раздел веб-страницы.</p>
<hr aria-hidden="true">
<h2>Раздел 3</h2>
<p>Это третий раздел веб-страницы.</p>

Для чего использовать тег <hr>

• Для отделения двух разделов друг от друга.
• Для разделения элементов на веб-странице.
• Для разделения частей формы.
• Для разделения содержимого в электронном письме.
• Для улучшения доступности путём визуального разделения содержания страницы.

Атрибуты тега <hr>

У тега <hr> нет специфических атрибутов.

Глобальные атрибуты

Тег <hr> поддерживает все глобальные атрибуты HTML.

Ограничения

• На странице тег <hr> отображается как горизонтальная линия.
• Тег <hr> не подходит для использования в качестве декоративного элемента — он нужен для визуального и смыслового разделения контента.

Нюансы

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

Поддержка браузерами

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Для разделения содержимого веб-страницы можно использовать <div> или <section>.

Чем заменить тег

Тег <hr> можно заменить CSS-свойством border или псевдоэлементами ::before и ::after.

Актуальность

Тег <hr> актуален и широко используется в современной веб-разработке.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.