Element <hr> w HTML

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Element <hr> służy w HTML do wstawienia poziomej linii oddzielającej fragmenty treści. W HTML5 ma także znaczenie semantyczne: oznacza przerwę tematyczną między sekcjami, np. zmianę wątku w artykule.

Najważniejsze cechy

  • zapisuje się go jako <hr>
  • jest elementem pustym, czyli nie ma treści wewnątrz
  • nie wymaga znacznika zamykającego </hr>
  • domyślnie przeglądarka wyświetla go jako poziomą linię
  • jego wygląd najlepiej zmieniać za pomocą CSS

Przykład użycia

<h2>Opis produktu</h2>
<p>Produkt przeznaczony jest do codziennego użytku.</p>

<hr>

<h2>Dane techniczne</h2>
<p>Wymiary: 20 cm x 10 cm.</p>

W powyższym przykładzie <hr> oddziela dwie części dokumentu: opis produktu i dane techniczne.

Stylowanie w CSS

<hr class='separator'>

.separator {
  border: none;
  border-top: 2px solid #333;
  margin: 20px 0;
}

Dzięki CSS można zmienić grubość, kolor, szerokość i odstępy wokół linii.

Częsty błąd egzaminacyjny

Znacznik <br> tworzy złamanie wiersza, a nie poziomą linię. Do poziomego separatora należy użyć <hr>.