<hr>
Tematyczny podział treści, na przykład zmiana sceny w opowiadaniu albo przejście do innego wątku.
- Wyświetlanie
- block
- Znacznik zamykający
- Brak, element pusty
- Dozwolona zawartość
- Brak, element pusty
Przykład
#<p>Kasia zapisała plik, zamknęła laptopa i poszła spać, pewna, że wszystko działa.</p>
<hr>
<p>Rano zobaczyła biały ekran i jeden czerwony komunikat w konsoli.</p>Definicja i zastosowanie
#Element <hr> oznacza tematyczne przejście między akapitami: zmianę sceny w opowiadaniu, przeskok w czasie albo przejście do innego wątku w obrębie jednej sekcji. Przeglądarki rysują go jako poziomą linię, stąd nazwa od angielskiego horizontal rule.
Ta linia ma znaczenie. Czytniki ekranu informują o niej jako o separatorze, więc nie wstawiaj jej wyłącznie dla ozdoby. Jeśli potrzebujesz samej kreski, dodaj obramowanie w CSS, np. border-top. Między sekcjami z nagłówkami <hr> zwykle jest zbędny, bo zmianę tematu sygnalizuje już nagłówek.
Wygląd zmienisz w CSS: domyślnie to cienka, wklęsła ramka. Dawne atrybuty size, width, noshade i align są przestarzałe. Od niedawna <hr> może też oddzielać grupy opcji wewnątrz listy <select>.
Składnia
#<hr>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p>Koniec modułu pierwszego.</p>
<hr style="border: none; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f97316, #a78bfa);">
<p>Moduł drugi: formularze.</p><label for="course">Wybierz kurs</label>
<select id="course">
<option>HTML i CSS</option>
<option>JavaScript</option>
<hr>
<option>Python</option>
<option>Analiza danych</option>
</select>Linię zobaczysz po rozwinięciu listy. Starsze przeglądarki pominą <hr> i pokażą same opcje.
Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
hr {
color: gray;
border-style: inset;
border-width: 1px;
margin-block: 0.5em;
margin-inline: auto;
overflow: hidden;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie używaj
<hr>jako ozdobnika. Dekoracyjną linię narysuj w CSS. - Kolor linii najłatwiej zmienić, usuwając ramkę i nadając wysokość oraz tło:
border: none; height: 2px; background: …. - Między sekcjami z własnymi nagłówkami separator zwykle nie jest potrzebny.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.