Dokumentacja HTML z przykładami: Nowa linia (br)

Q: Jak dodać nową linię w HTML?

Wstaw tam, gdzie ma się zacząć nowa linia: Line one Line two. Naciśnięcie Enter w pliku HTML nie działa, bo przeglądarki traktują znaki nowej linii w kodzie jak zwykłe spacje.

Q: Pisać , czy ?

Wszystkie trzy działają w HTML i dają ten sam element. to zwykła forma HTML; wersje z ukośnikiem są akceptowane dla zgodności z XHTML i JSX. Samo jest niepoprawne, choć przeglądarki czytają je jako kolejne przejście do nowej linii.

Q: Kiedy używać zamiast ?

Użyj , gdy podział linii jest częścią samej treści, jak w adresie czy wierszu. Dla osobnych akapitów stosuj osobne elementy , a odstępy rób marginesem w CSS, zamiast układać kolejne znaczniki .

Q: Jak zachować podziały linii z tekstu bez dodawania znaczników ?

Nadaj elementowi white-space: pre-line w CSS. Przeglądarka pokaże wtedy każdy znak nowej linii w tekście jako podział linii, nadal scalając nadmiarowe spacje. Przydaje się to przy komentarzach użytkowników i tekście wczytywanym przez JavaScript.

Q: Jak zablokować łamanie linii w HTML?

Umieść tekst w elemencie z white-space: nowrap albo połącz dwa słowa twardą spacją , żeby zawsze zostały w tej samej linii.

Nowa linia w HTML: znacznik br, znaki nowej linii i łamanie

Użyj , żeby zacząć nową linię wewnątrz bloku tekstu. Dowiedz się, kiedy jest właściwy, a kiedy lepszy jest akapit, jak zachować znaki nowej linii z tekstu, jak pozwolić długim słowom się łamać przez i jak zablokować łamanie linii.

Na tej stronie są działające edytory: edytuj, uruchamiaj i od razu zobacz wynik.

Autor: Kevin Spektor, Współzałożyciel i CTO

Opublikowano Sep 24, 2026

Jak dodać nową linię

Wstaw   tam, gdzie ma się zacząć nowa linia. To element pusty, więc nie ma znacznika zamykającego:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line break</title>
</head>
<body>
  <p>
    Coddy Ltd.<br>
    12 Market Street<br>
    Springfield
  </p>
  <p>Pressing Enter in the source
     does not break the line.</p>
</body>
</html>

Adres łamie się dokładnie przy każdym  . Drugi akapit zostaje w jednej linii, choć w kodzie ma znak nowej linii: HTML traktuje znaki nowej linii, tabulatory i ciągi spacji jak jedną spację. Właśnie dlatego istnieje  .

 ,   i   dają ten sam element. Używaj tej formy, której używa twój projekt (JSX i XHTML wymagają ukośnika).

br vs p: podział to nie odstęp

  kończy linię w obrębie tego samego akapitu. Nowy  zaczyna nowy akapit, z odstępem nad nim i pod nim dzięki domyślnym marginesom. Układanie kolejnych  , żeby zrobić odstęp, działa, ale jest kruche i przekazuje złą informację:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>br vs p</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .box { border: 2px solid #e5e7eb; padding: 0 12px; margin-bottom: 12px; }
    .spaced p { margin: 0 0 24px; }
  </style>
</head>
<body>
  <div class="box">
    <p>With br tags:<br><br><br>Second paragraph?</p>
  </div>
  <div class="box spaced">
    <p>With two paragraphs and CSS margin:</p>
    <p>Second paragraph.</p>
  </div>
</body>
</html>

Oba pola wyglądają podobnie, ale pierwsze to dla czytnika ekranu jeden akapit, a zmiana odstępów oznacza edycję każdej strony. W drugim odstęp to jedna linia CSS.

Dobre zastosowania  : adresy, wiersze i teksty piosenek oraz linie w podpisie, gdzie podział należy do tekstu. Do wszystkiego innego używaj akapitów, list albo nagłówków.

Zachowanie znaków nowej linii z tekstu

Gdy tekst pochodzi z innego miejsca (pola komentarza, bazy danych, skryptu), zawiera prawdziwe znaki nowej linii zamiast znaczników  . Reguła CSS white-space: pre-line sprawia, że przeglądarka pokazuje te znaki jako podziały linii:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pre-line</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .msg { border: 2px solid #e5e7eb; padding: 8px 12px; margin-bottom: 8px; }
    .keep { white-space: pre-line; border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="msg" id="a"></div>
  <div class="msg keep" id="b"></div>
  <script>
    const text = 'Hi team,\nThe build is fixed.\nThanks!';
    document.getElementById('a').textContent = text;
    document.getElementById('b').textContent = text;
  </script>
</body>
</html>

Ten sam napis wyświetla się w jednej linii w szarym polu i w trzech liniach w niebieskim. To także bezpieczniejsze niż wstawianie znaczników   do tekstu użytkownika przez innerHTML, co pozwoliłoby użytkownikom wstrzyknąć HTML. Żeby zachować także spacje i wcięcia, użyj white-space: pre, opisanego na stronie spacje w HTML.

Łamanie długich słów: wbr

Długie słowo albo URL bez spacji może wychodzić poza wąskie pole.  oznacza miejsce, w którym przeglądarka może złamać linię, jeśli musi, a poza tym nic nie robi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>wbr</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 160px; border: 2px solid #f59e0b; padding: 4px; margin-bottom: 12px; }
  </style>
</head>
<body>
  <div class="narrow">example.com/docs/html/line-break-tag</div>
  <div class="narrow">example.com/<wbr>docs/<wbr>html/<wbr>line-break-tag</div>
</body>
</html>

Pierwsza ścieżka wychodzi poza pole; druga łamie się w miejscach . Dla tekstu, nad którym nie masz kontroli, właściwość CSS overflow-wrap: anywhere łamie długie słowa w dowolnym miejscu.

Blokowanie łamania linii

Czasem chcesz czegoś odwrotnego: utrzymać razem "10 km" albo numer telefonu. Masz dwa narzędzia:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>No break</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .narrow { width: 170px; border: 2px solid #16a34a; padding: 4px; }
    .nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <p class="narrow">The race is exactly 10&nbsp;km long, call <span class="nowrap">+1 555 0100</span> to join.</p>
</body>
</html>

  to spacja, przy której przeglądarka nie złamie linii, więc "10" i "km" zostają razem. white-space: nowrap trzyma cały span w jednej linii. Zamień   na zwykłą spację albo usuń klasę, a przy tej szerokości oba teksty rozdzielą się na dwie linie.

Częste błędy

Naciskanie Enter w kodzie i oczekiwanie nowej linii. Znaki nowej linii w HTML to spacje. Użyj  , osobnych elementów albo white-space: pre-line.
Układanie   dla odstępu. Używaj akapitów i margin.
Budowanie listy z  . Użyj <ul> lub <ol> z <li>, które czytniki ekranu ogłaszają jako listę.
Pisanie . To niepoprawne. Pisz  .
Dodawanie   do tekstu użytkownika przez innerHTML. Ustaw textContent i użyj white-space: pre-line.

Najczęściej zadawane pytania

Jak dodać nową linię w HTML?

Wstaw   tam, gdzie ma się zacząć nowa linia: Line one Line two. Naciśnięcie Enter w pliku HTML nie działa, bo przeglądarki traktują znaki nowej linii w kodzie jak zwykłe spacje.

Pisać , czy ?

Wszystkie trzy działają w HTML i dają ten sam element.   to zwykła forma HTML; wersje z ukośnikiem są akceptowane dla zgodności z XHTML i JSX. Samo  jest niepoprawne, choć przeglądarki czytają je jako kolejne przejście do nowej linii.

Kiedy używać zamiast ?

Użyj  , gdy podział linii jest częścią samej treści, jak w adresie czy wierszu. Dla osobnych akapitów stosuj osobne elementy , a odstępy rób marginesem w CSS, zamiast układać kolejne znaczniki  .

Jak zachować podziały linii z tekstu bez dodawania znaczników ?

Nadaj elementowi white-space: pre-line w CSS. Przeglądarka pokaże wtedy każdy znak nowej linii w tekście jako podział linii, nadal scalając nadmiarowe spacje. Przydaje się to przy komentarzach użytkowników i tekście wczytywanym przez JavaScript.

Jak zablokować łamanie linii w HTML?

Umieść tekst w elemencie z white-space: nowrap albo połącz dwa słowa twardą spacją  , żeby zawsze zostały w tej samej linii.

Powiązane zagadnienia