Тег горизонтальной линии HTML hr - разбор возможностей и примеры использования

Введение

Тег горизонтальной линии HTML hr часто воспринимают как простой визуальный разделитель, который просто рисует линию на странице. На практике у него есть более важная роль. Он несет семантический смысл и помогает обозначать логический разрыв содержания внутри документа.

В этой статье вы увидите, как тег hr работает в современных браузерах, как он описан в спецификации HTML, как его правильно стилизовать с помощью CSS и в каких ситуациях его стоит использовать, а в каких лучше заменить другими решениями. Я покажу вам примеры кода с комментариями, чтобы вы могли сразу применять их в своих проектах.

Что такое тег hr и зачем он нужен

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

Тег hr в HTML5 описан как тематический разрыв между абзацами содержимого. Это означает, что он предназначен не просто для рисования линии, а для обозначения перехода:

• к новой теме внутри раздела
• к другой части одного и того же текста
• к смене контекста (например, из основного текста к примечаниям или дополнительной информации)

Смотрите, как это может выглядеть в простом примере:

<p>Вы просматриваете статью о языке HTML.</p>

<hr> <!-- Тематический разрыв между частями контента -->

<p>Теперь давайте перейдем к разбору практических примеров.</p>

Комментарии здесь подсказывают, что hr используется не как декоративный элемент, а как маркер логического перехода.

Важно понимать разницу:

• Если вам просто нужна декоративная линия в дизайне, лучше использовать CSS и элементы div или псевдоэлементы.
• Если вы хотите явно показать структуру текста (например, разделить части статьи), тогда тег hr будет уместен.

Блочный элемент и поведение по умолчанию

Тег hr является блочным элементом:

• занимает всю доступную ширину контейнера по умолчанию
• начинается с новой строки
• не может содержать внутри себя другие элементы (это одиночный тег без закрывающего парного тега)

Базовое использование выглядит так:

<hr>

Раньше иногда писали:

<hr />

Это вариант из XHTML-стиля, браузеры его по-прежнему понимают, но в современном HTML достаточно использовать просто hr без слэша.

Как браузеры отображают hr по умолчанию

Поведение по умолчанию зависит от браузера, но обычно:

• линия имеет некоторую толщину (чаще всего 1–2 пикселя)
• линия растягивается на всю ширину родительского контейнера
• сверху и снизу есть стандартные отступы (margin)
• цвет линии часто совпадает с цветом текста или задается системно

Давайте посмотрим, как браузер может отрисовать hr без стилей:

<p>Первая часть текста</p>
<hr>
<p>Вторая часть текста после линии</p>

Чтобы увидеть, как это конкретно выглядит, вы можете создать простой HTML-файл, вставить пример и открыть страницу в браузере.

Атрибуты тега hr в HTML4 и HTML5

Устаревшие атрибуты и почему их лучше не использовать

Исторически hr поддерживал набор атрибутов, например:

• size
• width
• align
• color
• noshade

Сегодня эти атрибуты считаются устаревшими в HTML5. Они работают в большинстве браузеров, но рекомендуются только для старых страниц, которые вы поддерживаете. Для новой верстки лучше управлять внешним видом через CSS.

Вот пример устаревшего подхода:

<!-- Пример устаревшего оформления hr -->
<hr size="5" width="50%" color="red" align="left" noshade>

Здесь:

// size управляет толщиной линии
// width задает ширину
// color задает цвет
// align управляет выравниванием
// noshade отключает объемный эффект линии

Сегодня вместо этого применяют CSS:

<!-- Современный подход через CSS -->
<hr class="section-divider">

.section-divider {
  /* Толщина линии */
  border: none;              /* Убираем стандартную рамку */
  border-top: 5px solid red; /* Рисуем свою линию */
  width: 50%;                /* Задаем ширину */
  margin-left: 0;            /* Выравниваем линию по левому краю */
}

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

Поддерживаемые глобальные атрибуты

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

• id
• class
• style
• title
• data-атрибуты (например, data-section, data-role и т.д.)

Пример использования глобальных атрибутов:

<hr id="main-separator"
    class="article-separator"
    title="Переход к следующей теме"
    data-section="intro-end">

Комментарии:

// id используется для ссылок и JavaScript
// class задает класс для CSS-стилей
// title показывает подсказку при наведении мыши
// data-section хранит произвольные данные для логики на JavaScript

Стилизация hr с помощью CSS

Базовая стилизация линий

Чтобы вы лучше почувствовали, как можно управлять внешним видом hr, давайте посмотрим на несколько вариантов.

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

<hr class="simple-line">

.simple-line {
  border: none;              /* Убираем стандартное оформление */
  border-top: 1px solid #ccc;/* Рисуем тонкую серую линию сверху */
  margin: 20px 0;            /* Добавляем вертикальные отступы */
}

Комментарии:

// border: none удаляет рамку, которую браузер может нарисовать по умолчанию
// border-top создает одну линию сверху элемента
// margin управляет расстоянием до соседнего содержимого

Жирная акцентная линия

<hr class="bold-line">

.bold-line {
  border: none;                 /* Сбрасываем стандартную рамку */
  border-top: 4px solid #2c3e50;/* Толстая темная линия */
  margin: 30px 0;               /* Увеличенный отступ для акцента */
}

Здесь вы создаете более заметный визуальный разделитель между логическими блоками.

Управление шириной и выравниванием

Вы можете контролировать ширину линии и ее позиционирование внутри контейнера.

Центрированная короткая линия

<hr class="centered-line">

.centered-line {
  border: none;                 /* Убираем стандартное оформление */
  border-top: 2px solid #aaa;   /* Рисуем свою линию */
  width: 40%;                   /* Ограничиваем ширину */
  margin: 30px auto;            /* Центрируем с помощью auto по горизонтали */
}

Комментарии:

// width 40% делает линию короче ширины контейнера
// margin: 30px auto центрирует элемент по горизонтали

Линия, выровненная по левому краю

<hr class="left-line">

.left-line {
  border: none;                 /* Сбрасываем стандартную рамку */
  border-top: 2px solid #555;   /* Рисуем линию */
  width: 30%;                   /* Задаем ширину */
  margin: 20px 0;               /* Сбрасываем горизонтальные отступы */
}

Если вам нужно явно убрать центрирование, не ставьте auto для горизонтальных отступов.

Изменение толщины и типа линии

Через CSS вы управляете толщиной и типом линии:

• толщина – в свойстве border-width
• стиль – в свойстве border-style (solid, dashed, dotted, double и другие)

Пунктирная линия

<hr class="dashed-line">

.dashed-line {
  border: none;                    /* Удаляем стандартную рамку */
  border-top: 2px dashed #999;     /* Рисуем пунктирную линию */
  margin: 25px 0;                  /* Отступы */
}

Точечная линия

<hr class="dotted-line">

.dotted-line {
  border: none;                    /* Убираем стандартный стиль */
  border-top: 2px dotted #999;     /* Рисуем точечную линию */
  margin: 25px 0;                  /* Отступы */
}

Двойная линия

<hr class="double-line">

.double-line {
  border: none;                    /* Убираем стандартную рамку */
  border-top: 3px double #444;     /* Двойная линия */
  margin: 30px 0;                  /* Отступы */
}

Здесь вы видите, как разные значения border-style позволяют варьировать визуальный стиль разделителя, оставаясь в рамках одного тега hr.

Тематический разрыв и доступность

Как hr влияет на доступность (a11y)

Экранные читалки и другие вспомогательные технологии воспринимают hr не только как линию, но и как структурный маркер. Когда читалка доходит до hr, она может озвучить что-то вроде:

• разделитель
• горизонтальная линия
• тематический разрыв

Это помогает пользователю понять, что структура текста изменилась.

Чтобы сделать использование hr полезнее для доступности, стоит применять его именно там, где действительно меняется тема или часть содержания. Например:

<article>
  <h2>История HTML</h2>
  <p>Здесь вы видите текст о появлении HTML и первых спецификациях.</p>

  <hr> <!-- Прерывание темы: переходим к практическому использованию -->

  <h2>Практическое применение HTML сегодня</h2>
  <p>Теперь текст переходит к современным реалиям и примерам кода.</p>
</article>

Комментарии:

// hr здесь разделяет две смысловые части внутри одной статьи
// такой разрыв будет понятен и визуально и с помощью экранной читалки

Когда hr уместен с точки зрения семантики

Используйте hr, когда:

• вы хотите обозначить смену темы внутри одного раздела
• вы разделяете основную часть текста и блок с примечаниями, сносками, источниками
• вы подчеркиваете переход от описания к примеру, если этот переход значимый

Избегайте hr, когда:

• вы просто рисуете декоративные линии для оформления макета
• вы пытаетесь заменить hr место заголовков h2–h4
• вы создаете сложные композиционные элементы, которые лучше описать структурой блоков и CSS

Для архитектуры разметки это важно: чем логичнее вы используете семантические элементы, тем легче поддерживать код и тем лучше страница воспринимается вспомогательными технологиями.

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

Разделение секций внутри статьи

Посмотрите на пример длинной статьи, в которой автор явно разделяет части текста:

<article class="blog-post">
  <h1>Работа с формами в HTML</h1>
  <p>В этом разделе вы узнаете базовую теорию о тегах форм.</p>

  <hr class="section-divider"><!-- Разделение вводной части и практики -->

  <h2>Практические примеры</h2>
  <p>Теперь текст переходит к коду и демонстрациям.</p>

  <hr class="section-divider"><!-- Разделение двух больших смысловых частей -->

  <h2>Частые ошибки</h2>
  <p>Здесь мы разберем распространенные проблемы и пути их решения.</p>
</article>

.section-divider {
  border: none;                   /* Убираем стандартное оформление */
  border-top: 2px solid #e0e0e0;  /* Нейтральная линия */
  margin: 40px 0;                 /* Большие отступы для визуального разделения */
}

Комментарии:

// один и тот же класс section-divider переиспользуется несколько раз
// вы управляете единым стилем для всех разделителей внутри статьи

Отделение основного текста от дополнительных блоков

Тег hr удобно применять для отделения основного контента от дополнительного:

<article class="post">
  <h1>Основы работы с Git</h1>
  <p>Здесь вы видите основную часть статьи.</p>

  <hr class="meta-divider"><!-- Переход от основного текста к дополнительному блоку -->

  <aside class="post-meta">
    <h2>Дополнительно</h2>
    <p>Список ссылок и полезных материалов по теме.</p>
  </aside>
</article>

.meta-divider {
  border: none;                 /* Убираем дефолтный стиль */
  border-top: 1px solid #ddd;   /* Тонкая линия */
  margin: 30px 0 20px 0;        /* Верхний отступ больше, чем нижний */
}

Комментарии:

// hr играет роль границы между основным содержимым и боковой информацией
// отступы помогают визуально уравновесить композицию

Линия внутри карточек и блоков интерфейса

Если вы делаете карточки с информацией, hr может помочь структурировать содержимое:

<div class="profile-card">
  <h2>Алексей Петров</h2>
  <p>Frontend-разработчик</p>

  <hr class="card-divider"><!-- Разделяем общий блок и детали профиля -->

  <ul>
    <li>Город - Москва</li>
    <li>Опыт - 5 лет</li>
    <li>Стек - HTML CSS JavaScript React</li>
  </ul>
</div>

.profile-card {
  border: 1px solid #eee;      /* Рамка карточки */
  padding: 20px;               /* Внутренние отступы */
  border-radius: 8px;          /* Скругление углов */
}

.card-divider {
  border: none;                /* Убираем стандартную линию */
  border-top: 1px solid #eee;  /* Ненавязчивый разделитель */
  margin: 15px 0;              /* Отступы сверху и снизу */
}

Комментарии:

// hr используется внутри компонента profile-card
// линия визуально отделяет заголовок карточки от остальных данных

Кастомный дизайн для hr

Линия с текстом по центру

Иногда вам нужно не просто нарисовать линию, а добавить к ней текст, например:

Разделитель – или – Продолжение статьи

Строго говоря, тег hr сам по себе не поддерживает содержимое. Но вы можете создать компонент, который ведет себя как логический разделитель и визуально напоминает hr.

Давайте разберемся на примере.

<div class="hr-with-text">
  <span>или</span>
</div>

.hr-with-text {
  display: flex;                 /* Используем flex-бокс для размещения линий и текста */
  align-items: center;           /* Вертикально выравниваем по центру */
  text-align: center;            /* Центруем текст */
  color: #888;                   /* Цвет текста */
  margin: 30px 0;                /* Отступы вокруг блока */
}

.hr-with-text::before,
.hr-with-text::after {
  content: "";                   /* Создаем псевдоэлементы без текста */
  flex: 1;                       /* Занимаем все доступное пространство по сторонам */
  border-bottom: 1px solid #ccc; /* Рисуем линии */
}

.hr-with-text:not(:empty)::before {
  margin-right: 0.75em;          /* Отступ между левой линией и текстом */
}

.hr-with-text:not(:empty)::after {
  margin-left: 0.75em;           /* Отступ между правой линией и текстом */
}

Комментарии:

// hr-with-text заменяет hr, когда нужен текст в середине
// псевдоэлементы before и after создают линии слева и справа
// span содержит текст или

Это уже не чистый hr, но концептуально элемент выполняет ту же задачу разделения и визуально продолжает идею горизонтальной линии.

Линия с иконкой по центру

На практике вы часто можете встретить разделители с иконками. Пример:

<div class="hr-with-icon">
  <span class="icon">★</span> <!-- Здесь вы можете использовать SVG или шрифт-иконку -->
</div>

.hr-with-icon {
  display: flex;                  /* Flex-контейнер для линии и иконки */
  align-items: center;            /* Выравниваем по вертикали */
  margin: 40px 0;                 /* Отступы вокруг */
}

.hr-with-icon::before,
.hr-with-icon::after {
  content: "";                    /* Псевдоэлементы для линий */
  flex: 1;                        /* Занимаем все доступное пространство */
  border-bottom: 1px solid #ddd;  /* Рисуем линии */
}

.hr-with-icon::before {
  margin-right: 15px;             /* Отступ от иконки слева */
}

.hr-with-icon::after {
  margin-left: 15px;              /* Отступ от иконки справа */
}

.hr-with-icon .icon {
  font-size: 18px;                /* Размер иконки */
  color: #999;                    /* Цвет иконки */
}

Комментарии:

// такая конструкция часто используется в лендингах и современных интерфейсах
// несмотря на отсутствие тега hr, идея горизонтального разделителя сохраняется

Адаптивное оформление hr

В адаптивной верстке вы можете менять стиль hr в зависимости от размера экрана.

<hr class="responsive-line">

.responsive-line {
  border: none;                        /* Убираем стандартный стиль */
  border-top: 2px solid #ccc;          /* Базовая линия */
  margin: 20px 0;                      /* Базовые отступы */
}

/* Для больших экранов */
@media (min-width: 1024px) {
  .responsive-line {
    border-top-width: 3px;             /* Делаем линию чуть толще */
    width: 60%;                         /* Линия не на всю ширину */
    margin: 40px auto;                  /* Центрируем и увеличиваем отступы */
  }
}

/* Для очень маленьких экранов */
@media (max-width: 480px) {
  .responsive-line {
    border-top-width: 1px;             /* Делаем линию тоньше */
    margin: 15px 0;                    /* Уменьшаем отступы */
  }
}

Комментарии:

// на больших экранах разделитель становится более выразительным
// на маленьких экранах линия менее навязчива и лучше вписывается в компактный интерфейс

hr и современные фреймворки

Использование hr в React

В React вы можете использовать тег hr так же, как в обычном HTML. Смотрите пример:

function Article() {
  return (
    <article>
      <h1>Тег hr в React</h1>
      <p>Здесь вы видите первый абзац текста.</p>

      {/* Добавляем разделитель как самостоятельный JSX-элемент */}
      <hr className="article-divider" />

      <p>Здесь второй абзац, который логически отделен линией.</p>
    </article>
  );
}

.article-divider {
  border: none;                  /* Сбрасываем дефолтное оформление */
  border-top: 1px solid #ddd;    /* Рисуем свою линию */
  margin: 24px 0;                /* Отступы */
}

Комментарии:

// в React нужно использовать className вместо class
// hr – самозакрывающийся JSX-элемент, что соответствует синтаксису React

Использование hr в шаблонах (например, в Blade, Twig, EJS)

В серверных шаблонизаторах (Blade, Twig, EJS и других) hr используется так же, как в обычном HTML.

Пример на Blade:

<article>
  <h1>{{ $title }}</h1>
  <p>{{ $intro }}</p>

  <hr class="article-divider"><!-- Разделяет вводную часть и основную -->

  <div class="content">
    {!! $content !!}
  </div>
</article>

Комментарии:

// hr не требует дополнительной логики в шаблонизаторе
// вы можете добавлять классы и атрибуты так же, как в обычном HTML

Типичные ошибки при использовании hr

Неправильное использование для декоративных элементов

Иногда hr используют просто как способ нарисовать горизонтальную линию в произвольном месте, не думая о семантике. Например:

<!-- Плохой пример: линия используется только как фон для заголовка -->
<h2>Заголовок</h2>
<hr>

Если вы хотите создать декоративную линию рядом с заголовком, лучше использовать CSS:

<h2 class="titled-line">Заголовок</h2>

.titled-line {
  position: relative;               /* Позиционируем заголовок */
  padding-bottom: 10px;             /* Добавляем место под линией */
}

.titled-line::after {
  content: "";                      /* Псевдоэлемент для линии */
  position: absolute;               /* Абсолютное позиционирование */
  left: 0;                          /* Начало линии слева */
  bottom: 0;                        /* Размещаем линию под текстом */
  width: 50px;                      /* Длина линии */
  border-bottom: 2px solid #000;    /* Собственно линия */
}

Комментарии:

// здесь линия – чисто декоративный элемент
// тег hr не нужен, потому что семантически разрыва текста нет

Использование устаревших атрибутов вместо CSS

Мы уже говорили о таких атрибутах, как width, size, color. Несмотря на то, что они зачастую работают, их применение в новой верстке считается плохой практикой, потому что:

• смешивает содержимое и представление в одном месте
• усложняет поддержку и масштабирование кода
• противоречит идее отделения структуры HTML от стилей CSS

Если вы видите такой код:

<hr width="80%" size="3" color="blue">

Перепишите его с использованием классов и CSS:

<hr class="custom-line">

.custom-line {
  border: none;                   /* Убираем стандартное оформление */
  border-top: 3px solid blue;     /* Настраиваем толщину и цвет */
  width: 80%;                     /* Управляем шириной */
  margin: 20px auto;              /* Центрируем линию */
}

Комментарии:

// теперь все настройки собраны в CSS
// вы легко можете переиспользовать класс custom-line в других местах

Слишком частый и бессистемный usage hr

Если вы вставляете hr после каждого абзаца, текст становится визуально перегруженным, а структура – неясной. hr должен подчеркивать действительно значимые переходы. В противном случае вы теряете внимание читателя.

Лучше подумайте, можно ли:

• заменить часть линий на логические заголовки h2 или h3
• использовать отступы и типографику вместо избыточного количества линий
• объединить близкие по смыслу блоки и сократить число разделителей

Поддержка браузерами и нюансы кроссбраузерности

Отличия отображения по умолчанию

Разные браузеры по-разному задают стандартные стили hr:

• толщина и цвет линии могут отличаться
• могут быть разные отступы margin
• в некоторых случаях отображение может напоминать 3D-линию (особенно в старых браузерах)

Чтобы получить предсказуемый результат, часто применяют сброс стилей (reset) или нормализацию (normalize). Пример минимального сброса стиля для hr:

hr {
  box-sizing: content-box;        /* Управляем расчетом ширины */
  height: 0;                      /* Высота не используется для линий */
  overflow: visible;              /* Гарантируем предсказуемое поведение */
}

После этого вы можете задавать свои стили для конкретных классов.

Поддержка в старых браузерах

В старых версиях браузеров (например, очень старые Internet Explorer) часть современных CSS-свойств могла обрабатываться иначе, но тег hr сам по себе поддерживался практически всегда.

Если вы работаете с очень старыми проектами:

• проверяйте, не завязаны ли стили на устаревшие атрибуты hr
• учитывайте, что некоторые комбинации border и background могли выглядеть иначе
• внимательно проверяйте визуальный результат в целевых браузерах

В современной разработке на актуальных версиях браузеров серьезных проблем с hr обычно не возникает.

Краткие рекомендации по использованию hr

Подведем основные практические моменты, которые вы можете применять прямо в работе:

1. Используйте hr как логический разделитель тем внутри страницы, а не как чисто декоративный элемент.
2. Всегда стилизуйте hr через CSS, а не через устаревшие HTML-атрибуты вроде width, size, color.
3. Задавайте классы для разных типов разделителей, чтобы иметь возможность переиспользовать и менять стили в одном месте.
4. Помните про доступность – hr помогает ассистивным технологиям понять структуру текста, не злоупотребляйте им.
5. Для более сложных разделителей (с текстом, иконками, декоративными эффектами) создавайте отдельные компоненты на div и псевдоэлементах.

Используя эти правила, вы сможете сделать страницы визуально аккуратными и структурно понятными без лишнего усложнения разметки.

Частозадаваемые технические вопросы по теме тега hr

Как задать отступы сверху и снизу у hr отдельно друг от друга

Используйте разные значения для margin-top и margin-bottom в CSS.

hr.custom-margin {
  border: none;                 /* Убираем стандартное оформление */
  border-top: 1px solid #ccc;   /* Рисуем линию */
  margin-top: 40px;             /* Отступ сверху */
  margin-bottom: 10px;          /* Отступ снизу */
}

Комментарии:

// margin-top и margin-bottom управляют расстоянием до соседних элементов
// вы можете гибко настраивать визуальный ритм текста

Как изменить цвет hr в зависимости от темы (светлая или темная)

Используйте CSS-переменные и переключение темы через класс на body:

:root {
  --hr-color: #ddd;             /* Цвет по умолчанию */
}

body.dark-theme {
  --hr-color: #555;             /* Цвет для темной темы */
}

hr.themable {
  border: none;                 /* Убираем дефолтный стиль */
  border-top: 1px solid var(--hr-color); /* Используем переменную */
}

Комментарии:

// вы меняете тему, добавляя или убирая класс dark-theme у body
// hr автоматически подстраивается под текущую тему

Как анимировать появление hr (например, от центра к краям)

Используйте CSS-анимацию ширины и transform-origin:

<hr class="animated-line">

.animated-line {
  border: none;                     /* Убираем стандартное оформление */
  border-top: 2px solid #3498db;    /* Рисуем линию */
  width: 0;                         /* Начальная ширина */
  margin: 20px auto;                /* Центрируем линию */
  transform-origin: center;         /* Точка масштабирования по центру */
  animation: grow-line 0.8s forwards;/* Запускаем анимацию */
}

@keyframes grow-line {
  from {
    width: 0;                       /* Начало анимации */
  }
  to {
    width: 60%;                     /* Конечная ширина */
  }
}

Комментарии:

// анимация плавно увеличивает ширину линии от центра
// forwards фиксирует конечное состояние после завершения анимации

Как сделать hr, который не ломает поток текста на мобильных устройствах

Иногда вам нужно скрыть hr на маленьких экранах, чтобы не перегружать мобильный интерфейс.

hr.mobile-hidden {
  border: none;                    /* Базовая линия */
  border-top: 1px solid #ddd;
  margin: 20px 0;
}

@media (max-width: 600px) {
  hr.mobile-hidden {
    display: none;                 /* Скрываем линию на мобильных */
  }
}

Комментарии:

// display: none полностью удаляет hr из визуального потока
// структура HTML сохраняется, но линия не мешает на маленьком экране

Как повесить обработчик события на hr в JavaScript

Вы можете использовать стандартный addEventListener, как и для других элементов.

<hr id="clickable-hr">

// Находим hr по id
const hrElement = document.getElementById('clickable-hr');

// Вешаем обработчик клика
hrElement.addEventListener('click', function () {
  // Здесь вы выполняете любую логику
  alert('Линия была нажата');
});

Комментарии:

// тег hr доступен в DOM как обычный элемент
// вы можете использовать события click mouseover и другие при необходимости