Poznaj Programowanie

Tagi HTML: hr

Piotr Grochal 6 min. czytania

Znacznik <hr> to prosty, a zarazem niezwykle użyteczny element HTML, który służy do wizualnego i semantycznego oddzielania sekcji treści na stronie. Reprezentuje przerwę tematyczną między akapitami (np. zmianę wątku, rozpoczęcie nowej sekcji), renderując się zazwyczaj jako pozioma linia.

W tym wpisie zgłębimy praktyczne zastosowania: od składni i semantyki, przez najlepsze praktyki, po zaawansowaną stylizację z przykładami. Pokażę, jak unikać błędów, zastąpić przestarzałe atrybuty CSS-em i zintegrować <hr> z nowoczesnymi projektami.

Czym dokładnie jest znacznik <hr> i do czego służy?

<hr> (horizontal rule) to element pusty (void element) – nie ma znacznika zamykającego ani zawartości wewnętrznej. W HTML5 poprawna składnia to po prostu <hr> lub <hr /> (zgodnie z XHTML).

Głównym zadaniem <hr> jest semantyczne oznaczenie przerwy tematycznej. Najczęstsze zastosowania to:

  • oddzielanie rozdziałów w artykule,
  • przejście między scenami w opowiadaniu,
  • wizualne rozdzielanie bloków treści w formularzach czy listach.

Przykład podstawowego użycia

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład &lt;hr&gt;</title>
</head>
<body>
<p>To jest akapit powyżej linii poziomej.</p>
<hr>
<p>To jest akapit poniżej linii poziomej.</p>
</body>
</html>

Efekt: domyślna pozioma linia (najczęściej szara i cienka) oddziela dwa akapity. <hr> nie wymaga dodatkowych znaczników div czy span, co upraszcza kod.

Składnia i specyfikacja HTML5

Najważniejsze informacje o <hr> ze specyfikacji HTML5:

  • Kontekst użycia – można go umieszczać w elementach przyjmujących treść ogólną (np. body, section, article);
  • Zawartość – to element pusty, nie posiada dzieci ani tekstu;
  • Atrybuty – obsługuje atrybuty globalne (np. id, class, style, lang) i zdarzeniowe (np. onclick);
  • Interfejs DOM – HTMLHRElement.

Nie używaj <hr> wyłącznie dekoracyjnie: jeśli linia ma wyłącznie funkcję estetyczną (bez znaczenia semantycznego), lepiej zastosować np. border-bottom na kontenerze. To poprawia dostępność i SEO.

Przestarzałe atrybuty – nie używaj ich w nowych projektach

W HTML 4.01 <hr> miało atrybuty takie jak width, height, color, align, noshade, size. Są one zdeprecjonowane w HTML5 – zastąp je CSS.

Przykłady niepoprawne (unikaj):

<!-- ŹLE -->
<hr width="50%" align="center" color="red" size="5">
<hr width="300" noshade>

Stosuj klasy CSS, aby mieć pełną kontrolę nad wyglądem i zachować czysty, semantyczny HTML.

Stylizacja <hr> za pomocą CSS – praktyczne przykłady

Domyślny wygląd <hr> różni się w zależności od przeglądarki. Dzięki CSS zyskujesz pełną personalizację stylu, grubości i szerokości linii.

1. Podstawowa zmiana koloru i grubości (inline style)

<hr style="border: none; border-top: 1px solid red;">
<hr style="border: none; border-top: 3px solid #e63946;">

Efekt: jednolita, czerwona linia o wybranej grubości.

2. Linia kropkowana lub przerywana

<hr style="border: none; border-top: 2px dotted #d00000;">
<hr style="border: none; border-top: 2px dashed #1d3557;">

Idealne do subtelnych podziałów treści.

3. Gruba linia z marginesami (klasa CSS)

hr.custom-hr {
border: none; /* usuń domyślną ramkę */
height: 2px; /* grubość */
background-color: #ccc; /* kolor linii */
margin: 20px 0; /* odstępy góra/dół */
}
<hr class="custom-hr">

Efekt: czysta, szara linia o wysokości 2px z eleganckimi marginesami.

4. Zaawansowane style – podwójna linia, gradient, wyrównanie

hr.double {
border: 0;
border-top: 1px solid #e60000;
border-bottom: 1px solid #e60000; /* efekt dwóch linii */
height: 0;
margin: 16px 0;
}
hr.gradient {
border: none;
height: 2px;
background: linear-gradient(to right, transparent, #ff0000, transparent);
margin: 30px 0;
width: 60%; /* ograniczenie szerokości */
}
hr.right-aligned {
border: none;
border-top: 6px solid #f1c40f;
width: 40%;
margin-left: auto; /* wyrównanie do prawej */
margin-right: 0;
}
<hr class="double">
<hr class="gradient">
<hr class="right-aligned">

Efekty: podwójna czerwona linia, delikatny gradient oraz linia wyrównana do prawej.

5. Responsywna linia z JavaScript (dynamiczna zmiana)

Dla interaktywności możesz zmieniać styl linii w locie:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<style>
hr.dynamic { border: none; border-top: 1px solid blue; transition: all 0.3s; }
</style>
</head>
<body>
<hr class="dynamic" id="myHr">
<button onclick="changeStyle()">Zmień styl</button>
<script>
function changeStyle() {
const hr = document.getElementById('myHr');
hr.style.borderTop = '5px dotted green';
hr.style.width = '80%';
hr.style.margin = '24px auto';
}
</script>
</body>
</html>

Kliknięcie zmienia linię na grubą, zieloną i kropkowaną, a także zwiększa jej szerokość.

Najlepsze praktyki i częste błędy

Tworząc czytelne podziały treści, pamiętaj o poniższych zasadach:

  • używaj z umiarem – nadmiar linii zaciemnia hierarchię treści i męczy wzrok,
  • semantyka ponad dekoracją – stosuj <hr> wyłącznie dla przerwy tematycznej; dla czystej dekoracji użyj obramowania kontenera,
  • dostępność – czytniki ekranu interpretują <hr> jako „separator” kontekstu, co pomaga w nawigacji,
  • responsywność – kontroluj width oraz margin w media queries, aby linia dobrze wyglądała na każdym ekranie,
  • alternatywy – dla efektu czysto wizualnego wystarczy np. border-bottom: 1px solid #ccc; na div lub nagłówku.

Najczęściej zadawane pytania (FAQ)

Oto szybkie odpowiedzi na najczęstsze pytania o <hr>:

  • Czy <hr> wymaga zamykającego tagu – nie, to element pusty (void element);
  • Jak usunąć domyślny cień/ramkę – ustaw border: none; i zdefiniuj np. border-top: 1px solid #ccc; lub nadaj kolor tła z wysokością (height);
  • Dlaczego linia bywa „podwójna” – przeglądarki mogą rysować górną i dolną krawędź; ustaw tylko jedną krawędź (np. border-top) i wyzeruj pozostałe.

Podsumowując przykłady w akcji – pełny kod strony

Poniżej znajdziesz kompletny przykład strony z kilkoma stylami <hr>:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykłady &lt;hr&gt; w akcji</title>
<style>
body { font-family: sans-serif; }
hr.hobby {
border: none;
height: 2px;
background-color: darkcyan;
margin: 30px 0;
}
hr.section {
border: 0;
border-top: 3px solid #333;
margin: 24px 0;
}
</style>
</head>
<body>
<h1>Moje Hobby</h1>
<p>Czytanie książek.</p>
<hr class="hobby">
<p>Programowanie w HTML/CSS.</p>
<hr class="section">
<p>Podróże.</p>
</body>
</html>

Efekt: eleganckie, spójne podziały tematyczne w treści.