Poznaj Programowanie

Tagi HTML: wbr

Piotr Grochal 7 min. czytania

W codziennej pracy nad stronami internetowymi często spotykamy się z problemem długich ciągów znaków, które nie mieszczą się prawidłowo na ekranach urządzeń mobilnych. Może to być długi URL, skomplikowana ścieżka do pliku lub niezwykłe słowo bez spacji.

Tag <wbr> wskazuje przeglądarce sugerowane miejsca przełamania wiersza, poprawiając czytelność bez wymuszania łamań.

Czym jest tag wbr?

Element <wbr> reprezentuje możliwość przerwania słowa (Word Break Opportunity). W przeciwieństwie do tagu <br>, który zawsze wymusza przerwę wiersza, <wbr> działa opcjonalnie – przeglądarka decyduje, czy faktycznie przerwać linię w zasugerowanym miejscu.

Wyobraź sobie scenariusz: użytkownik na monitorze panoramicznym mieści całą długą linię, ale na smartfonie brakuje miejsca. Dzięki <wbr> wskazujesz logiczne punkty łamania, a przeglądarka wybiera najlepsze z nich w zależności od szerokości ekranu.

Składnia i właściwości

Tag <wbr> jest elementem pustym – nie posiada zawartości ani tagu zamykającego. Składnia wygląda tak:

<wbr>

Kluczowe cechy:

  • Brak wymaganych atrybutów – nie ma żadnych obowiązkowych parametrów;
  • Wyświetlanie CSS – inline;
  • Kategoria – element treści frazowej;
  • Interfejs DOM – HTMLElement.

Praktyczne zastosowania

1. Długie adresy URL i ścieżki do plików

Jednym z najpowszechniejszych zastosowań jest kontrola przełamywania długich adresów URL. Przykład użycia:

<p> Przejdź do: <a href="https://www.example.com/exceptionally/long/url/which/needs/a/break"> https://www.example.com<wbr>/exceptionally<wbr>/long<wbr>/url<wbr>/which<wbr>/needs<wbr>/a<wbr>/break </a> </p>

W tym przykładzie <wbr> sugeruje przeglądarce, że może przerwać linię po każdym ukośniku. Na szerszych ekranach cały URL zostanie wyświetlony w jednej linii, ale na urządzeniach mobilnych podzieli się elegancko w zasugerowanych miejscach.

2. Długie słowa bez przerw

W przypadku bardzo długich ciągów alfanumerycznych bez spacji możesz wskazać bezpieczne miejsca łamania:

<p> Numer seryjny produktu: 123456789<wbr>012345678<wbr>901234567<wbr>890 </p>

3. Nazwy techniczne i kody

Dla złożonych nazw technicznych lub obiektów programistycznych warto dodać możliwości łamania w długich identyfikatorach. Przykład użycia w tekście:

W JavaScripcie pracujesz z obiektem XMLHttp<wbr>Request do wysyłania asynchronicznych żądań HTTP.

4. Kombinacja z tagiem pre

Ciekawe rozwiązanie to połączenie <wbr> z tagiem <pre>, które pozwala zachować formatowanie kodu przy umożliwieniu przełamania długich linii. Przykład:

<pre>
&lt;!doctype html&gt;<wbr>
&lt;html&gt;<wbr>
&lt;head&gt;<wbr>
&lt;title&gt;Moja strona&lt;/title&gt;<wbr>
&lt;/head&gt;<wbr>
&lt;body&gt;<wbr>
&lt;h1&gt;Zawartość&lt;/h1&gt;<wbr>
&lt;/body&gt;<wbr>
&lt;/html&gt;
</pre>

Różnica między wbr a br

Kluczowe rozróżnienie między tymi dwoma tagami przedstawia poniższe zestawienie:

Cecha <br> <wbr>
Wymuszenie przerwania Zawsze wymusza przerwę Sugeruje, ale nie wymusza
Responsywność Sztywny, może wyglądać źle na wielkich ekranach Elastyczny, dostosowuje się do szerokości
Semantyka Przerwanie ze względów strukturalnych Przerwanie ze względów formatowania
Zastosowanie Poezja, adresy pocztowe, wiersze dialogu Długie słowa, adresy URL, kody

Przykład dla <br> w adresie korespondencyjnym:

<p> John Smith<br> ul. Warszawska 123<br> 00-001 Warszawa<br> Polska </p>

Przykład dla <wbr> w długim linku:

<p> Pobierz plik z: https://cdn.example.com<wbr>/assets<wbr>/downloads<wbr>/large-file.zip </p>

Zalety wbr dla responsywności

Tag <wbr> jest kluczowym narzędziem dla RWD (Responsive Web Design), bo pozwala kontrolować łamanie linii tam, gdzie CSS bywa niewystarczający.

Prawidłowo wstawione <wbr> znacząco poprawia czytelność treści na małych ekranach i redukuje ryzyko nieestetycznych zawijań.

Scenariusz praktyczny

Wyobraź sobie newsletter e-mail. Długi adres e-mail może przełamać się nieprawidłowo. Różnicę widać w poniższych przykładach:

<!-- Bez wbr – może się przełamać w złym miejscu -->
<p>Skontaktuj się z nami: [email protected]</p>

<!-- Z wbr – kontrolowane przełamanie -->
<p>
Skontaktuj się z nami:
very.long.company<wbr>.email<wbr>.address<wbr>@subdomain<wbr>.example<wbr>.com
</p>

Wskazówki dla programistów

Kiedy używać wbr

W tych sytuacjach <wbr> szczególnie pomaga:

  • długie adresy URL i ścieżki plików,
  • kody produktów i numery seryjne,
  • techniczne nazwy bez spacji,
  • treści wielojęzyczne zawierające długie słowa,
  • kody programistyczne w tekście.

Kiedy unikać wbr

Stosuj <wbr> oszczędnie i pamiętaj o poniższych wyjątkach:

  • zwykły tekst ze spacjami – przeglądarka sama go przełamie,
  • kiedy lepiej pasuje <br> (strukturalne przerwania),
  • w nadmiarze – może zaśmiecić HTML (używaj oszczędnie).

Najlepsze praktyki

Wykorzystaj te wskazówki, aby osiągnąć najlepszy efekt:

  1. Umieszczaj wbr w logicznych miejscach – po ukośniku, myślniku lub przed operatorem logicznym;
  2. Testuj na różnych urządzeniach – weryfikuj, że przełamanie wygląda dobrze na mobile i desktop;
  3. Łącz z CSS – właściwości word-break i overflow-wrap mogą uzupełnić działanie <wbr>;
  4. Dokumentuj siebie – dodaj komentarz, dlaczego właśnie tam umieściłeś <wbr>.

Przykład kompleksowy

Poniżej znajdziesz kompletny przykład zastosowania <wbr> w dokumentacji API (adresy i nazwy rozdzielone w kontrolowanych punktach):

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dokumentacja API</title>
<style>
code {
background: #f4f4f4;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Courier New', monospace;
}
.endpoint {
margin: 1em 0;
padding: 1em;
border-left: 4px solid #0066cc;
background: #f9f9f9;
}
</style>
</head>
<body>
<h1>Dokumentacja API</h1>

<div class="endpoint">
<h2>Endpoint do pobrania danych</h2>
<p>
Pełny adres URL:
<code>https://api.example.com<wbr>/v1<wbr>/users<wbr>/profile<wbr>/data<wbr>?format=json<wbr>&include=metadata</code>
</p>
<p>
Kod odpowiedzi:
<code>XMLHttp<wbr>Request<wbr>.<wbr>onreadystatechange</code>
</p>
</div>

<div class="endpoint">
<h2>Identyfikator transakcji</h2>
<p>Wzór: TX<wbr>-<wbr>2024<wbr>-<wbr>123456789<wbr>-<wbr>ABCDEF</p>
</div>
</body>
</html>