Znacznik hr, czyli jak zrobić poziomą linię w HTML

redakcja | 22.03.2021 09:49

Element <hr>, szeroko i potocznie znany jako linia HTML,  rozdziela tematycznie paragraf w tekście i taka jest jego bardzo ważna semantyczna cecha. Wstawiając <hr> pomiędzy paragrafy, powinniście mieć w głowie, że niektóre roboty analizujące waszą treść tak to potraktują. 

Rysowanie poziomej linii
Rysowanie poziomej linii | envato, mimagephotography

Bardzo popularnym zastosowaniem semantycznym jest rozdzielanie ściany cytatów zapisanych w elemencie blockquote.  

W HTML4 znacznik <hr> wskazywał tylko poziomą linię i pojęcie linia HTML była z nim ściśle związana, natomiast w HTML5 to oddzielanie semantyczne treści, które dodatkowo jest prezentowane jako pozioma linia.

Znacznik <hr> to element void, który nie potrzebuje i nie powinien być domykany, bo domknięcie będzie potraktowane jak dodanie drugiej linii. 

Do czego nie używać znacznika <hr>?

Jeżeli nie rozdzielać tematycznie paragrafów, cytatów, a potrzebujesz poziomych linii dla szczególnych potrzeb layoutu swojej strony internetowej, to powinieneś zainteresować się dodawanie poziomych linii jako właściwość border (border-top, border-bottom)  do elementów blokowych div. 

Jeżeli potrzebujesz zacząć zdanie od nowej linii, nie używaj semantycznego <hr>, a dodaj znak nowej linii, jakim jest znacznik <br>. Innym sposobem na rozdzielanie semantyczne treści jest używanie nagłówków Hx, którymi jesteśmy w stanie podzielić tematyczne części akapitów. Zapoznaj się na naszej stronie jak tworzyć dobre śródtytuły pod lepsze SEO.

Proponowane artykuły