Tag <br> to jeden z najprostszych i najbardziej podstawowych elementów HTML, który reprezentuje złamanie wiersza (ang. line break). Służy do wymuszenia przejścia tekstu do nowej linii bez tworzenia nowego akapitu, co czyni go idealnym narzędziem w sytuacjach, gdzie potrzebujemy precyzyjnej kontroli nad układem tekstu.
W nowoczesnym front-endzie, gdzie semantyka i CSS są kluczowe, tag <br> ma swoje miejsce, ale powinien być stosowany z umiarem.
Czym dokładnie jest tag <br> i jak działa?
Element <br> to element pusty (void element) – nie posiada znacznika zamykającego. Wystarczy wpisać <br> lub <br /> (oba warianty są poprawne w HTML5).
W DOM-ie odpowiada mu interfejs HTMLBRElement, a jego jedynym zadaniem jest przerwanie bieżącego wiersza i przeniesienie zawartości na nową linię, co symuluje efekt klawisza Enter w edytorze tekstu.
W odróżnieniu od <p>, który tworzy pełny blok z marginesami, <br> dodaje tylko przerwę równą wysokości linii – jest lekki, ale łatwy do nadużycia.
Podstawowa składnia i przykłady użycia
Tak wygląda prosty przykład użycia <br> w akapicie:
<p>To jest pierwszy wiersz tekstu.<br> A to drugi wiersz, wymuszony tagiem <br>.<br> Trzeci wiersz następuje naturalnie.</p>
Efekt wizualny – kolejny fragment tekstu pojawi się w nowej linii, bez dodatkowego odstępu między akapitami.
Tag <br> można umieszczać w większości elementów zawierających treść tekstową (np. <p>, <div>, <span>, <li>, nagłówki, formularze).
Kiedy powinno się używać tagu <br>? Praktyczne przykłady
W tych scenariuszach proste złamanie linii jest semantycznie uzasadnione:
- adresy i dane kontaktowe – wymuszenie nowych linii w obrębie jednego bloku;
- wiersze poezji lub piosenek – zachowanie oryginalnego rytmu tekstu;
- formularze HTML – oddzielanie krótkich pól wejściowych dla czytelności;
- krótkie listy lub etykiety – np. w tabelach lub kartach produktów, gdy nie chcemy pełnych bloków.
Przykład adresu zapisany w jednym bloku:
<address>
ul. Przykładowa 123<br>
00-001 Warszawa<br>
Polska
</address>
Przykład wiersza z zachowaniem rytmu:
<p>
W lasach malinowych maliny<br>
Zbieram w twoim sercu malinowym.
</p>
Prosty formularz, w którym kolejne pola są w nowych liniach:
<form>
Imię: <input type="text" name="imie"><br>
Nazwisko: <input type="text" name="nazwisko"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Wyślij">
</form>
W kompozycji typograficznej <br> pomaga budować rytm tekstu, np. w sloganach czy cytatach.
Kiedy nie używać tagu <br>? Typowe błędy i pułapki
Nadużywanie <br> bywa częstym błędem początkujących. Unikaj go w poniższych sytuacjach:
- do tworzenia akapitów lub przerw – zamiast ciągów
<br><br>użyj<p>oraz CSSmargin; - w długich tekstach – utrudnia dostępność (screen readery), SEO i responsywność; lepsze są semantyczne struktury jak
<section>,<article>; - do pozycjonowania layoutu – stosy
<br>nie służą do „spychania” elementów; używaj CSS Flexbox, Grid lubmargin/padding.
Przykład niepoprawny (nadużycie <br>):
<p>Tekst1<br><br>Tekst2</p>
<!-- Dwa <br> jako "akapit" – semantycznie błędne -->
Przykład poprawny (oddzielne akapity):
<p>Tekst1</p>
<p>Tekst2</p>
Alternatywnie, kontrola odstępów w CSS:
p {
margin-bottom: 1.5em;
}
Przesadne użycie <br> obniża czytelność, zwłaszcza na urządzeniach mobilnych, gdzie przeglądarki i tak automatycznie łamią linie.
Alternatywy dla <br>: nowoczesne podejście z HTML i CSS
W HTML5/CSS3 masz wiele lepszych narzędzi do kontrolowania odstępów i struktury. Oto porównanie najczęstszych przypadków użycia:
| Sytuacja | Zalecane rozwiązanie | Przykład | Zalety |
|---|---|---|---|
| Nowe akapity | <p> + CSS margin |
<p>Tekst1</p><p>Tekst2</p> |
Semantyka, dostępność |
| Większe przerwy | CSS margin-bottom lub ::after |
p { margin-bottom: 2em; } |
Responsywność |
| Poezja/wiersze | <br> lub <pre> |
<pre>Linia1\nLinia2</pre> |
Zachowanie formatowania |
| Layout formularzy | CSS Flexbox/Grid | .form-row { display: flex; gap: 1em; } |
Elastyczność |
| Linie w adresach | <br> lub CSS white-space: pre-line |
address { white-space: pre-line; } |
Kontrola bez hacków |
Dla wierszy poezji rozważ <pre> z white-space: pre-wrap w CSS – zachowuje oryginalne entery bez ręcznego wstawiania <br>.
Atrybuty tagu <br>: przeszłość i teraźniejszość
W starszych specyfikacjach (np. HTML 4.01) <br> miał atrybut clear (all, left, right, none) do obsługi elementów pływających. W HTML5 atrybut clear jest przestarzały – stosuj CSS clear: both.
Współcześnie <br> akceptuje jedynie globalne atrybuty (np. id, class, style), ale stylowanie lepiej trzymać w arkuszach CSS.
Przykład (pokazowy – style przenieś do zewnętrznego CSS):
<br class="custom-break" style="display: block; margin-bottom: 1em;">
Integracja z JavaScript i responsywnością
Tak w JavaScript dynamicznie dodasz złamanie linii do istniejącego akapitu:
const tekst = document.querySelector('p');
tekst.innerHTML += '<br>Nowa linia dodana JS-em!';
Możesz też sterować widocznością <br> w zależności od szerokości ekranu:
@media (max-width: 600px) {
br.small-screen {
display: none; /* Ukryj <br> na mobile */
}
}
Podsumowanie najlepszych praktyk dla programistów HTML/CSS/JS
Stosuj te zasady, aby zachować semantykę i czytelność:
- używaj oszczędnie – tylko tam, gdzie semantyka wymaga złamania linii (adresy, poezja, formularze);
- priorytet semantyki – preferuj
<p>lub struktury + CSS zamiast stosów<br>; - testuj dostępność – używaj narzędzi (np. WAVE, screen readery); nadmiar
<br>dezorientuje; - responsywność first – łącz z CSS Grid/Flexbox dla nowoczesnych, elastycznych layoutów.
Tag <br> jest prosty i skuteczny – największą wartością jest jego przemyślane, zdyscyplinowane użycie.