Linia pozioma HTML

Linia pozioma w HTML, oznaczona jako <hr>, jest prostym, ale bardzo przydatnym elementem używanym do wizualnego oddzielania treści na stronie internetowej. Jest szczególnie przydatna do rozdzielania sekcji tekstu, oddzielania nagłówków od treści lub po prostu dodawania wizualnego podziału w długim dokumencie. W tym artykule omówię znaczenie, zastosowanie i najlepsze praktyki używania znacznika <hr> w HTML, a także przedstawię liczne przykłady, które pomogą zrozumieć, jak go efektywnie wykorzystywać.

Znacznik linii poziomej `<hr>`

Znacznik <hr> oznacza „horizontal rule” i jest jednym z tzw. znaczników pustych, co oznacza, że nie zawiera treści i nie potrzebuje znacznika zamykającego. Jest używany do tworzenia linii poziomej, która rozdziela treści w dokumencie HTML. Oto podstawowy przykład użycia znacznika <hr>

<p>To jest akapit powyżej linii poziomej.</p>
<hr>
<p>To jest akapit poniżej linii poziomej.</p>

To jest akapit powyżej linii poziomej.

To jest akapit poniżej linii poziomej.

Najlepsze praktyki używania znacznika `<hr>`

Umiejętne użycie – używaj znacznika <hr> z rozwagą, aby nie przeciążyć strony nadmiarem linii poziomych. Powinny one być używane tylko tam, gdzie rzeczywiście pomagają w organizacji treści.
Stylizacja – dzięki CSS możesz dostosować wygląd linii poziomej do stylu swojej strony. Możesz zmieniać jej kolor, grubość, długość oraz nadawać inne właściwości.
Czytelność – linia pozioma powinna poprawiać czytelność strony, a nie ją zakłócać. Używaj jej w miejscach, gdzie naturalnie występuje przerwa w treści lub zmiana tematu.

Zastosowanie znacznika `<hr>`

Znacznik <hr> jest szczególnie przydatny w sytuacjach, gdy chcesz wizualnie oddzielić sekcje lub elementy treści na stronie, takie jak:

Oddzielanie sekcji – kiedy chcesz wizualnie oddzielić różne sekcje tekstu lub tematy.

<h2>O Nas</h2>
<p>Firma XYZ jest liderem w branży.</p>
<hr>
<h2>Nasze Usługi</h2>
<p>Oferujemy szeroki zakres usług...</p>

Oddzielanie treści w blogu – w artykułach blogowych, gdzie chcesz oddzielić różne akapity lub sekcje.

<p>Wprowadzenie do tematu.</p>
<hr>
<p>Główna treść artykułu.</p>
<hr>
<p>Podsumowanie i wnioski.</p>

Formularze i informacje kontaktowe – kiedy chcesz oddzielić formularze kontaktowe lub inne dane.

<h2>Skontaktuj się z nami</h2>
<form>
    Imię: <input type="text" name="imie"><br>
    Email: <input type="email" name="email"><br>
    <button type="submit">Wyślij</button>
</form>
<hr>
<p>Firma XYZ<br>ul. Przykładowa 123<br>00-001 Miasto<br>Polska</p>

Stylizowanie znacznika `<hr>` za pomocą CSS

CSS pozwala na zaawansowane stylizowanie znacznika <hr>, co daje większą kontrolę nad wyglądem linii poziomej. Oto kilka przykładów:

Zmienianie koloru i grubości:

<style>
    hr.czerwone {
        border: none;
        height: 2px;
        background-color: red;
    }
</style>
<p>Powyżej czerwonej linii.</p>
<hr class="czerwone">
<p>Poniżej czerwonej linii.</p>

Powyżej czerwonej linii.

Poniżej czerwonej linii.

Ustawienie długości i wyśrodkowanie:

<style>
    hr.krotkie {
        width: 50%;
        margin: auto;
    }
</style>
<p>Powyżej krótkiej linii.</p>
<hr class="krotkie">
<p>Poniżej krótkiej linii.</p>

Powyżej krótkiej linii.

Poniżej krótkiej linii.

Zmienianie stylu linii:

<style>
    hr.kropkowane {
        border: none;
        border-top: 2px dotted blue;
    }
</style>
<p>Powyżej kropkowanej linii.</p>
<hr class="kropkowane">
<p>Poniżej kropkowanej linii.</p>

Powyżej kropkowanej linii.

Poniżej kropkowanej linii.