<hr>

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

<! -- Какой-то текст или элемент-->
<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> поддерживает все глобальные атрибуты HTML.

Ограничения

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

Нюансы

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

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

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

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