Тег br в HTML: как перенести строку и когда без него обойтись

Тег <br> переносит строку внутри текста: ставите <br> в нужное место, и всё, что идёт после него, браузер выводит с новой строки. Закрывающего тега у br нет, абзац он не создаёт и отступ не добавляет. Подходит для адреса, стихов и подписи в письме, а для новых абзацев нужен <p>, для отступов — CSS.

Если разметку вы видите впервые, сначала прочитайте, что такое HTML и из чего состоит страница. Пробовать примеры удобнее в своём файле: как его завести, мы разобрали в инструкции про создание index.html. А разобрать вёрстку с наставником можно на одном из курсов по HTML.

CheckroiПодборка курсов по HTML208 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как написать тег br: синтаксис

Название пришло из английского line break, «разрыв строки». В спецификации HTML у br пустая модель содержимого и нет закрывающего тега: внутрь него ничего не кладут.

<p>ООО «Ромашка»<br>
Москва, ул. Тверская, 1<br>
+7 495 000-00-00</p>

Встречаются три способа записи, и ведут они себя по-разному. Мы прогнали каждый через валидатор W3C и посмотрели, что из них собирает Chrome 154:

Запись <br /> осталась от XHTML. В обычном HTML5 она не ошибка, но и пользы от слеша нет. Пишите короткий вариант и держите одну запись во всех файлах проекта.

Своих атрибутов у br нет, только глобальные вроде class и id. Старый атрибут clear валидатор помечает предупреждением: он устарел, обтекание теперь отменяют свойством clear в CSS.

Когда br нужен, а когда нет

Правило в спецификации WHATWG короткое: br ставят только там, где разрыв строки и есть часть содержания. Пример из стандарта — почтовый адрес, где каждая строка значит своё. Делить br на смысловые куски абзац нельзя.

Где перенос уместен:

• почтовый адрес и реквизиты в подвале сайта;
• стихи и тексты песен, где строку задаёт автор;
• подпись в письме: имя, должность, телефон;
• подпись к картинке или полю формы, которую надо сломать в конкретном месте.

Где br превращается в костыль:

• новый абзац. Нужен <p>, как его оформить, мы разобрали в статье про тег p;
• пункты перечня. Для них есть списки ul и ol;
• вертикальный отступ между блоками. Это margin в CSS;
• поля формы друг под другом. Стандарт приводит такой код как неверный и советует обернуть каждое поле в свой <p>.

Чем br отличается от p и от отступа в CSS

Разница видна в пикселях. Ниже один и тот же адрес в трёх вариантах разметки, шрифт 16 px, высота строки 24 px. Смотрите, где оказывается вторая строка.

Отступ абзаца меняется одной строкой CSS: p { margin-bottom: 8px; }. Двойной br так не настроить. Мы пробовали задать ему margin-top: 40px и даже display: block, но в Chrome высота блока не изменилась ни на пиксель.

Решение: перенос внутри мысли — br, новая мысль — p, воздух между блоками — CSS. Про отступы, поля и блочную модель подробнее в статье о том, как устроен CSS.

Как перенести строку без br

Часто перенос нужен ради оформления, а текст трогать не хочется: подпись под иконкой, кнопка в две строки, длинное слово в узкой колонке. Здесь удобнее CSS, потому что разметка не меняется.

white-space: pre-line

Свойство white-space со значением pre-line показывает переводы строк из исходного текста как настоящие переносы. Лишние пробелы при этом схлопываются, как обычно.

.address { white-space: pre-line; }

Блочный элемент

Если кусок текста обёрнут в <span>, ему достаточно display: block, и он сам уйдёт на новую строку. Так делают подписи из двух частей: заголовок карточки сверху, цена снизу.

Перенос через ::after

Иногда разметку трогать нельзя, а перенос нужен после конкретного элемента. Тогда добавляют псевдоэлемент с символом перевода строки \A:

.name::after {
  content: "\A";
  white-space: pre;
}

В Chrome такой блок вырос с 24 до 48 px, то есть строка перенеслась.

wbr для длинных слов

Тег <wbr> отмечает место, где браузер может перенести строку, если она не влезает.

В колонке шириной 120 px слово из 28 букв без пробелов вылезло за край на 124 px. С тремя <wbr> внутри оно разложилось на три строки и осталось в границах.

Для обычного русского текста есть ещё мягкий перенос ­ и свойство hyphens.

Текст с переводами строк из формы или базы

Классическая задача: пользователь написал адрес в <textarea> в три строки, а на странице всё слиплось в одну. В тексте лежат символы \n, а HTML считает их обычными пробелами.

Безопаснее всего оставить текст текстом и включить pre-line. Вставка через textContent не пропустит в страницу чужой HTML, даже если в адресе окажется <script>. С DOM-методами вроде textContent и innerHTML подробно знакомит статья про DOM-дерево в JavaScript.

const el = document.querySelector('.address');
el.textContent = data.address;   // в CSS: .address { white-space: pre-line; }

Если нужны именно теги br, текст сначала экранируют и только потом меняют переводы строк. Обратный порядок открывает дорогу XSS:

const safe = text
  .replace(/&/g, '&')
  .replace(/</g, '&lt;')
  .replace(/>/g, '&gt;');
el.innerHTML = safe.replace(/\r?\n/g, '<br>');
// "Москва,<br>ул. Тверская, 1<br>&lt;script&gt;"

В PHP для этого есть функция nl2br. Сайт php.net из России открывается не всегда; если справка не грузится, подпись функции покажет консоль: php --rf nl2br.

Мы проверили её на PHP 8.3: по умолчанию она ставит <br /> в стиле XHTML, а со вторым аргументом false — короткий <br>. Сам перевод строки после тега остаётся в тексте. HTML она не экранирует, поэтому порядок такой:

echo nl2br(htmlspecialchars($address), false);

Частые ошибки с br

Закрывающий </br>

Симптом: страница выглядит нормально, а валидатор выдаёт ошибку. Причина в правилах разбора HTML: встретив </br>, браузер по алгоритму парсинга считает его открывающим тегом. В нашей проверке раз</br>два превратилось в раз<br>два.

Решение: убрать слеш и писать <br>.

Цепочка br вместо отступа

Три-четыре br подряд дают отступ, который зависит от шрифта и ломается на телефоне. Его нельзя уменьшить на мобильном и нельзя выровнять с соседним блоком.

Решение: убрать br и задать margin нужному блоку.

br между пунктами списка

Код <ul><li>…</li><br><li>…</li></ul> валидатор не пропускает: br не может быть прямым потомком <ul>. Расстояние между пунктами задают через li { margin-bottom: … }.

br во flex-контейнере не переносит

Это самая неочевидная ловушка. Пока внутри флекс-контейнера лежит голый текст, br работает. Стоит обернуть части в <span>, и br между ними перестаёт действовать: в нашей проверке «дизайнер» встал вплотную к имени в той же строке. Стили flex-basis и display: block на самом br тоже ничего не дали.

Решение: перенести br внутрь одного элемента, развернуть контейнер в колонку через flex-direction: column или вставить пустой блок с flex-basis: 100% при flex-wrap: wrap.

Перенос в заголовке ломает мобильную вёрстку

На широком экране br в заголовке красиво делит фразу, на узком оставляет на строке одно слово.

Решение: спрятать такой br на телефоне. Правило br { display: none; } в нашей проверке убрало перенос, и две строки слились в одну. Как задать правило только для узких экранов, рассказано в статье про медиа-запросы.

Абзацы на br и скринридер

Текст, нарезанный br вместо абзацев, неудобен людям с программами экранного доступа.

MDN предупреждает, что скринридер может сообщить о самом элементе, но не о том, что он разделяет. К тому же по абзацам здесь не перейти: для программы весь текст остаётся одним абзацем.

Чем больше на странице правильных <p>, тем проще её слушать.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Где освоить HTML и CSS системно

С br всё решается за минуту, а вот понять, когда нужен тег, а когда стиль, помогает только практика на настоящих макетах. Если вёрстка интересна как работа, посмотрите, чем занимается HTML-верстальщик, и план входа во фронтенд. Оформление отдельно разбирают на курсах по CSS, а ниже собраны программы по HTML с ценами и отзывами.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса	Coddy	9200 ₽	-	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Frontend-разработчик: сайты на HTML/CSS/JavaScript

  Coddy9200 ₽3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML