Як зробити горизонтальну лінію в HTML і CSS

Горизонтальний роздільник можна зробити кількома способами, але вибір залежить від змісту. Тег <hr> у сучасному HTML позначає тематичний перехід між фрагментами контенту, а суто декоративну лінію частіше зручніше малювати засобами CSS — наприклад, через border-top або псевдоелемент.

Старі атрибути align, color, noshade, size і width для hr належать до застарілого презентаційного підходу. Зовнішній вигляд роздільника сьогодні задають CSS.

Коли використовувати тег hr

<hr> доречний, коли в тексті відбувається змістовий або тематичний перехід: наприклад, між двома частинами довгого матеріалу. Це не просто «смужка для краси», хоча браузер за замовчуванням зазвичай показує елемент саме як горизонтальну лінію.

Наочний приклад. Між двома абзацами нижче знаходиться справжній елемент <hr>. Далі показано декоративний CSS-роздільник, щоб різницю було видно безпосередньо в статті.

Для тематичного переходу використовуйте семантичний hr; для чистого декору частіше достатньо border-top або псевдоелемента.

<p>Перша змістова частина тексту.</p>

<hr>

<p>Наступна частина з іншою темою.</p>

Елемент hr є void-елементом: йому не потрібен окремий закривальний тег. Запис <hr /> допустимий як стиль синтаксису, але завершальний слеш у HTML не потрібен.

Як оформити hr через CSS

Щоб отримати акуратний роздільник, найпростіше скинути стандартну рамку браузера й задати потрібну верхню межу.

hr {
  border: 0;
  border-top: 1px solid #d9d9d9;
  margin: 2rem 0;
}

Товщина, стиль і колір змінюються так само, як у звичайного border. Для короткої декоративної лінії можна обмежити ширину та вирівняти елемент:

hr.short {
  width: 6rem;
  border-top: 3px solid #208754;
  margin: 2rem auto;
}

Якщо роздільник використовується в різних місцях сайту, краще створити клас, ніж повторювати inline-стилі в кожному матеріалі.

Декоративна лінія через border

Якщо тематичного переходу немає й лінія потрібна лише як частина оформлення блока, семантично чистіше додати межу вже наявному елементу.

.section-title {
  padding-bottom: .5rem;
  border-bottom: 2px solid #208754;
}

Такий варіант особливо зручний для заголовків, карток, блоків меню або віджетів. Додатковий HTML-елемент заради однієї смуги в цьому разі не потрібен.

Лінія з текстом посередині.

Іноді потрібно візуально розділити частини сторінки підписом на кшталт «або», «далі» чи назвою блока. Для цього можна використати контейнер і псевдоелементи.

.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: #d9d9d9;
  flex: 1;
}

<p class="divider">або</p>

Тут сам підпис залишається звичайним текстом, а лінії створюються CSS. Якщо роздільник має лише декоративну функцію, такий варіант зазвичай логічніший, ніж кілька hr.

Чому старі атрибути hr краще не використовувати

У старих HTML-уроках часто трапляється розмітка на кшталт <hr color="red" width="50%" size="5">. Сучасна практика розділяє зміст і оформлення: HTML повідомляє про тематичний розрив, CSS визначає колір, ширину та товщину.

Переваги такого підходу добре помітні під час підтримки сайту:

• дизайн усіх роздільників змінюється в одному CSS-файлі;
• розмітка залишається коротшою та зрозумілішою;
• не потрібно підтримувати застарілі презентаційні атрибути;
• простіше адаптувати оформлення під мобільні пристрої й темну тему;
• можна використовувати CSS-змінні із загальної дизайн-системи сайту.

Якщо в старому матеріалі такі атрибути вже працюють, браузер може й надалі їх відображати, але для нового коду краще одразу використовувати CSS.

Відступи, ширина та адаптивність.

Роздільник не повинен прилипати до сусідніх абзаців. Зазвичай вертикальні відступи задають через margin, а ширину — відносними одиницями або максимальною шириною контейнера.

.content-divider {
  width: min(100%, 40rem);
  margin: 2rem auto;
  border: 0;
  border-top: 1px solid currentColor;
  opacity: .25;
}

currentColor бере поточний колір тексту, тому лінія легше адаптується до різних тем. Але надто низький контраст може зробити роздільник майже невидимим — оформлення варто перевіряти на реальному фоні сайту.

Типові помилки

Під час роботи з горизонтальними лініями найчастіше трапляються не технічні, а структурні проблеми. Варто уникати таких ситуацій:

• hr вставляється після кожного абзацу лише заради декору;
• одночасно використовуються HTML-атрибути та конфліктні CSS-правила;
• для лінії створюється порожній div, хоча достатньо border вже наявного елемента;
• фіксована ширина в пікселях виходить за межі мобільного екрана;
• товсті й яскраві роздільники конкурують із заголовками та основним вмістом.

Хороший роздільник допомагає побачити структуру, а не стає самостійним візуальним об’єктом.

Підсумок

Використовуйте <hr>, коли потрібен саме тематичний перехід між частинами контенту. Для суто декоративної смуги частіше підходить CSS border або псевдоелемент. Колір, товщину, ширину й відступи в обох випадках краще задавати через CSS, а не застарілими HTML-атрибутами.

Якщо потрібна рамка навколо цілого блока, див. окрему інструкцію «Як зробити рамку навколо тексту в HTML і CSS».