Lekcja 2.4: Linie horyzontalne (<hr>)
Czym jest znacznik <hr>?
Znacznik <hr> (od angielskiego "horizontal rule") służy do tworzenia linii horyzontalnej (poziomej) na stronie internetowej. W HTML5 znacznik ten ma znaczenie semantyczne - reprezentuje przerwę tematyczną między elementami na poziomie akapitu, np. zmianę sceny w opowiadaniu lub przejście do innego tematu w ramach sekcji.
Wizualnie przeglądarki domyślnie renderują <hr> jako poziomą linię, ale jego głównym celem jest oddzielenie treści pod względem tematycznym.
Składnia znacznika <hr>
Podobnie jak <br>, znacznik <hr> jest elementem pustym (void element), co oznacza, że nie ma znacznika zamykającego ani zawartości. W HTML5 można go zapisać na dwa sposoby:
<hr> <!-- Standardowy zapis w HTML5 -->
<hr /> <!-- Zapis zgodny z XHTML, również poprawny w HTML5 -->Przykład użycia <hr>
Znacznik <hr> umieszcza się między blokami treści, które chcemy oddzielić tematycznie.
<h2>Rozdział 1: Początek historii</h2>
<p>Opis pierwszej części historii... Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<hr> <!-- Przerwa tematyczna, np. zmiana sceny lub perspektywy -->
<p>Kontynuacja historii, ale z innej perspektywy lub w innym miejscu... Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<hr>
<h2>Rozdział 2: Dalsze losy</h2>
<p>Opis drugiej części historii... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>Rozdział 1: Początek historii
Opis pierwszej części historii... Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Kontynuacja historii, ale z innej perspektywy lub w innym miejscu... Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Rozdział 2: Dalsze losy
Opis drugiej części historii... Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Stylizacja znacznika <hr> za pomocą CSS
W starszych wersjach HTML znacznik <hr> posiadał atrybuty takie jak align, size, width czy noshade, które pozwalały kontrolować jego wygląd. W HTML5 wszystkie te atrybuty są przestarzałe i nie powinny być używane.
Do stylizacji linii horyzontalnej należy używać wyłącznie CSS. Można kontrolować jej kolor, grubość, szerokość, styl linii i marginesy.
Przykłady stylizacji <hr> za pomocą CSS:
<style>
hr {
border: none; /* Usuwa domyślną ramkę przeglądarki */
height: 1px; /* Grubość linii */
background-color: #ccc; /* Kolor linii */
margin: 20px 0; /* Marginesy górny/dolny */
}
hr.dashed {
border-top: 2px dashed blue; /* Linia kreskowana */
background-color: transparent; /* Ukrywa domyślne tło */
height: 0;
}
hr.gradient {
height: 3px;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
border: none;
}
hr.short {
width: 50%; /* Szerokość linii */
margin-left: auto;
margin-right: auto;
border-top: 1px solid black;
background-color: transparent;
height: 0;
}
</style>
<p>Paragraf 1</p>
<hr> <!-- Domyślna stylizacja z CSS -->
<p>Paragraf 2</p>
<hr class="dashed"> <!-- Linia kreskowana -->
<p>Paragraf 3</p>
<hr class="gradient"> <!-- Linia z gradientem -->
<p>Paragraf 4</p>
<hr class="short"> <!-- Krótka linia -->
<p>Paragraf 5</p>Znaczenie semantyczne vs. wygląd
Pamiętaj, że głównym celem <hr> jest semantyczne oddzielenie treści. Chociaż domyślnie renderuje się jako linia, nie należy go używać tylko dla uzyskania efektu wizualnego linii. Jeśli potrzebujesz ozdobnej linii lub separatora, który nie ma znaczenia semantycznego, lepiej użyć CSS (np. border-bottom dla elementu <div>).
Używaj <hr> tylko wtedy, gdy faktycznie chcesz zaznaczyć przerwę tematyczną między fragmentami treści.
Zadanie praktyczne (z rozwiązaniem)
Zadanie: Stwórz stronę HTML z dwoma sekcjami opisującymi różne hobby. Oddziel te sekcje za pomocą znacznika <hr> i nadaj mu niestandardowy styl za pomocą CSS (np. zmień kolor i grubość).
Rozwiązanie:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moje Hobby</title>
<style>
body {
font-family: sans-serif;
}
hr.hobby-separator {
border: none;
height: 2px;
background-color: darkcyan;
margin: 30px 0;
}
</style>
</head>
<body>
<h1>Moje Zainteresowania</h1>
<section>
<h2>Fotografia</h2>
<p>Fotografia to moja pasja od wielu lat. Uwielbiam uwieczniać chwile i krajobrazy. Najczęściej fotografuję przyrodę i architekturę.</p>
</section>
<hr class="hobby-separator"> <!-- Separator tematyczny między hobby -->
<section>
<h2>Gotowanie</h2>
<p>Drugim moim hobby jest gotowanie. Eksperymentowanie w kuchni i odkrywanie nowych smaków sprawia mi ogromną przyjemność. Szczególnie lubię kuchnię włoską.</p>
</section>
</body>
</html>Dodatkowe zadania do samodzielnego wykonania:
- Zmień styl linii
<hr>w powyższym przykładzie na linię kropkowaną o szerokości 80%. - Stwórz przykład strony z opowiadaniem, używając
<hr>do oddzielenia różnych scen. - Znajdź w internecie przykłady kreatywnego użycia stylizacji CSS dla znacznika
<hr>. - Stwórz wizualny separator za pomocą pustego elementu
<div>i stylów CSS (np.border-bottom), aby zobaczyć alternatywę dla<hr>, gdy nie ma potrzeby semantycznego oddzielenia.
Najczęściej zadawane pytania
Do czego służy znacznik <hr> w HTML5?
W HTML5 znacznik <hr> reprezentuje przerwę tematyczną między elementami na poziomie akapitu, np. zmianę sceny w opowiadaniu lub przejście do innego tematu. Wizualnie renderuje się jako linia pozioma.
Czy można zmienić wygląd linii <hr>?
Tak, wygląd linii <hr> można dowolnie modyfikować za pomocą CSS. Można zmieniać jej kolor, grubość, szerokość, styl (ciągła, kreskowana, kropkowana) oraz marginesy. Atrybuty HTML do stylizacji są przestarzałe.
Czy <hr> ma znacznik zamykający?
Nie, <hr> jest elementem pustym (void element), co oznacza, że nie ma znacznika zamykającego ani zawartości. W HTML5 poprawny zapis to <hr> lub <hr />.
Kiedy nie należy używać <hr>?
Nie należy używać <hr> tylko dla celów dekoracyjnych, czyli do wstawienia wizualnej linii bez znaczenia semantycznego. W takich przypadkach lepiej użyć CSS, np. właściwości border dla innych elementów.
Czy <hr> wpływa na SEO?
Znacznik <hr> ma niewielki bezpośredni wpływ na SEO. Jednak poprawne użycie go do strukturyzowania treści i oddzielania tematów może pomóc wyszukiwarkom lepiej zrozumieć kontekst i organizację strony, co pośrednio może wpłynąć na SEO.