Linie poziome <hr> i znaczniki <br>

Podczas tworzenia stron internetowych często potrzebujemy oddzielić sekcje lub wprowadzić ręczne przerwy w tekście. Do tego celu służą dwa proste, ale bardzo przydatne znaczniki HTML: <hr> oraz <br>.

Znacznik <hr> – linia pozioma

Znacznik <hr> wstawia poziomą linię, która wizualnie oddziela różne sekcje treści. Może być używana np. do oddzielenia nagłówka od treści lub jednej sekcji strony od drugiej.

Jest to element samodzielny (tzw. pusty), co oznacza, że nie potrzebuje znacznika zamykającego.

Podstawowe użycie:

<h1>Tytuł sekcji</h1>
<hr>
<p>To jest tekst po linii poziomej.</p>

Efekt działania:

Tytuł sekcji

To jest tekst po linii poziomej.

Linia <hr> może być stylizowana za pomocą CSS (np. zmiana koloru, szerokości, stylu linii), co omówimy w kolejnych modułach.

Znacznik <br> – łamanie linii (przerwa w tekście)

Znacznik <br> umożliwia wstawienie ręcznego złamania linii w miejscu, w którym normalnie przeglądarka umieściłaby tekst w jednej linii.

Przydaje się tam, gdzie potrzebujesz krótkich przerw w tekście, np. w wierszach wierszy, adresach, cytatach itp.

Podstawowe użycie:

<p>To jest pierwszy wiersz tekstu.<br>
To jest drugi wiersz tekstu.</p>

Efekt działania:

To jest pierwszy wiersz tekstu.
To jest drugi wiersz tekstu.

Przykład z adresami:

<p>
Firma XYZ<br>
ul. Przykładowa 1<br>
00-000 Miasto
</p>

Efekt działania:

Firma XYZ
ul. Przykładowa 1
00-000 Miasto

Różnice między <hr> i <br>

• <hr> – wstawia poziomą linię oddzielającą sekcje treści. Używane do podziału dokumentu na części.
• <br> – wstawia ręczne złamanie linii w tekście, bez dodawania odstępu lub innych elementów wizualnych.

🎯 Ćwiczenie w JSFiddle

Przejdź do JSFiddle i wklej poniższy kod w sekcji HTML:

<h1>Kontakt</h1>
<p>
Firma XYZ<br>
ul. Przykładowa 1<br>
00-000 Miasto
</p>

<hr>

<h2>O nas</h2>
<p>Jesteśmy firmą, która oferuje najlepsze rozwiązania dla Twojego biznesu.</p>

Kliknij przycisk Run, aby zobaczyć efekt działania kodu!