Aby wstawić nową linijkę w HTML, najczęściej używa się znacznika <br>. Odpowiada on za tzw. „złamanie linii” – czyli efekt podobny do naciśnięcia klawisza Enter w edytorze tekstu. W odróżnieniu od rozpoczynania nowego akapitu, nie tworzy przerwy nad i pod tekstem, lecz tylko przenosi kolejny fragment tekstu do nowej linii.
Co to jest znacznik <br>?
Znacznik <br> (ang. break) to pusty tag HTML, który nie wymaga zamknięcia (w HTML5 poprawna jest zarówno forma <br>, jak i <br />). Stosowany jest do tworzenia nowych linii w istniejącym bloku tekstu, bez rozdzielania go na osobne akapity. Dzięki temu zachowujesz spójność formatowania i unikasz zbędnych odstępów.
Podstawowy przykład użycia
<p>To jest pierwszy wiersz tekstu.<br>To jest drugi wiersz tekstu.</p> Efekt po wyświetleniu w przeglądarce:
To jest pierwszy wiersz tekstu.
To jest drugi wiersz tekstu.
Przykłady praktycznego zastosowania
Formatowanie adresów
Adresy często wymagają, by poszczególne linijki zaczynały się od nowej linii:
<p> Jan Kowalski<br> ul. Kwiatowa 12<br> 00-123 Warszawa<br> Polska </p> Wiersze i cytaty poetyckie
W przypadku poezji chcemy, by każdy wiersz zaczynał się dokładnie tam, gdzie zaplanował autor:
<p> Niektórzy lubią poezję.<br> Niektórzy — czyli nie wszyscy.<br> Nawet nie większość wszystkich, ale mniejszość.<br> Bez szkody dla reszty świata.<br> </p> Dane kontaktowe, podpisy, dedykacje
Często w stopkach e-maili, na stronach z danymi kontaktowymi albo zaproszeniach:
<p> Anna Nowak<br> Specjalista ds. marketingu<br> tel. 123 456 789<br> email: [email protected] </p> Formularze i etykiety
Gdy zależy Ci na przełamaniu długiego opisu lub etykiety (np. w opisie zakresu wyboru):
<label for="comments"> Komentarz<br> (opcjonalnie, max. 300 znaków) </label> <textarea id="comments"></textarea> Nowa linia vs. nowy akapit
Znacznik <br> różni się od znacznika akapitu <p> –
| Cel | Efekt | Przykład użycia |
|---|---|---|
| Nowy akapit | Tworzy większy odstęp i logicznie wydziela myśl | <p>To akapit pierwszy.</p> |
| Nowa linia | Przenosi tekst tuż pod poprzednim wierszem bez odstępu | <p>Pierwsza linia<br>Druga linia</p> |
Użycie <br> jest wskazane tam, gdzie chcesz po prostu przejść do nowej linii bez ingerencji w strukturę tekstu.
Dobre praktyki
- Nie nadużywaj
<br>– jeśli potrzebujesz większych odstępów lub logicznego podziału treści; stosuj znacznik<p>; - Stosuj
<br>głównie w specyficznych przypadkach – adresy, wiersze, dane kontaktowe, podpisy; - W dokumentach HTML5 dozwolone są obie formy zapisu –
<br>i<br />; - Unikaj stosowania wielu
<br>z rzędu do tworzenia odstępu – lepiej użyć CSS (propertie takie jakmarginlubpadding) do kontrolowania odstępu pomiędzy elementami.
Dodatkowe wskazówki
Jeżeli tworzysz responsywne strony i zależy Ci na pełnej kontroli nad przenoszeniem tekstu, rozważ także stosowanie stylów CSS zamiast nadmiaru znaczników HTML. W razie potrzeby możesz jednak zawsze sięgnąć po <br>, jeśli zależy Ci na szybkim, przewidywalnym efekcie przejścia do nowej linii.
Zastosowanie znacznika <br> to podstawowa i niezbędna umiejętność każdego twórcy stron internetowych, służąca zachowaniu czytelności treści tam, gdzie wymaga tego ich układ, a podział na akapity byłby niewłaściwy.
