Тег переноса строки HTML br

Введение

Тег переноса строки <br> в HTML кажется очень простым, но вокруг него возникает много вопросов: когда его использовать, а когда лучше обойтись без него, как он ведет себя в разных контекстах, какие есть подводные камни при верстке и адаптивном дизайне.

Давайте разберем тег <br> максимально подробно, но при этом простым языком. Смотрите, я покажу вам на примерах, как этот тег работает, какие у него особенности в HTML5, чем он отличается от блочных элементов, и почему злоупотребление <br> часто приводит к проблемам в верстке.

Что такое тег переноса строки <br>

Тег <br> (break) — это строчный (inline) элемент HTML, который вставляет разрыв строки внутри текстового потока. Его основная задача — перевести текст на новую строку без создания нового абзаца.

Важно понимать разницу:

• <p> создает новый абзац с отступами (которые можно стилизовать).
• <div> создает блочный контейнер, который по умолчанию начинается с новой строки.
• <br> просто разрывает текущую строку, не добавляя семантики и структурного смысла.

Вы можете воспринимать <br> как аналог нажатия клавиши Enter внутри одного абзаца, но не как создание нового логического блока текста.

Самозакрывающийся характер тега

Тег <br> не имеет закрывающего тега в HTML5. Правильная форма для HTML-разметки:

<p>Первая строка<br>Вторая строка</p>

Комментарии:

<p>
  Первая строка
  <br> <!-- Здесь мы вставляем разрыв строки внутри абзаца -->
  Вторая строка
</p>

В XHTML-стиле раньше часто использовали <br />. В современном HTML5 это необязательно, но браузеры понимают и такой вариант.

Краткое резюме по назначению

Тег <br> уместен, когда:

• нужно сделать искусственный перенос строки внутри одного смыслового блока;
• текст логически остается одним абзацем, но визуально требует нескольких строк;
• есть элементы, формат которых традиционно задается переносами (стихи, адрес, подписи).

И не подходит, когда:

• вы пытаетесь с его помощью создавать отступы между блоками;
• заменяете им правильную структуру документа (<p>, <h1>–<h6>, <ul>, <div> и т.д.);
• формируете сетку страницы через множественные <br>.

Теперь давайте перейдем к конкретным сценариям использования.

Синтаксис и базовое использование <br>

Базовый пример переноса строки

Давайте разберемся на простом примере:

<p>Это первая строка<br>А это уже вторая строка</p>

Комментарии:

<p>
  Это первая строка
  <br> <!-- Переносим текст на новую строку, но все еще в пределах одного абзаца -->
  А это уже вторая строка
</p>

Как видите, этот код выполняет перенос текста на следующую строку внутри одного тега <p>.

Множественные перенесения подряд

Если вы добавите несколько <br> подряд, браузер выполнит несколько переносов:

<p>Строка 1<br><br>Строка 2</p>

Комментарии:

<p>
  Строка 1
  <br> <!-- Первый перенос строки -->
  <br> <!-- Второй перенос строки - создается визуальный пустой промежуток -->
  Строка 2
</p>

Так можно сделать визуальный вертикальный промежуток, но этот подход считается плохой практикой. Для отступов стоит использовать CSS margin или padding, а не дублировать <br>.

HTML5 и <br>

В HTML5 тег <br>:

• является валидным без закрывающего слеша: <br>;
• не требует пары </br> (такой тег вообще не существует);
• может использоваться в большинстве контекстов внутри потока текста, кроме некоторых специфических областей (например, внутри <title>, <script>, <style> и т.п.).

Семантика и когда использовать <br>

Где <br> действительно уместен

Смотрите, я покажу вам типичные кейсы, где <br> действительно помогает, а не мешает.

1. Стихи и поэтический текст

Каждая строка стихотворения обычно начинается с новой строки, но все строки вместе могут считаться одним смысловым блоком.

<p>
  Я помню чудное мгновенье<br>
  Передо мной явилась ты<br>
  Как мимолетное виденье<br>
  Как гений чистой красоты
</p>

Комментарии:

<p>
  Я помню чудное мгновенье<br> <!-- Новая строка стихотворения -->
  Передо мной явилась ты<br>
  Как мимолетное виденье<br>
  Как гений чистой красоты
</p>

Здесь <br> логичен, потому что каждая строка — часть одного произведения, а не отдельный абзац.

2. Адреса и контактные данные

Часто адрес удобно показывать построчно:

<address>
  ООО Пример<br>
  г Москва<br>
  ул Пушкина д 10 офис 5
</address>

Комментарии:

<address>
  ООО Пример<br>      <!-- Название организации -->
  г Москва<br>        <!-- Город -->
  ул Пушкина д 10 офис 5 <!-- Улица и номер дома -->
</address>

Здесь <address> задает семантику контактной информации, а <br> отвечает только за визуальные переносы строк.

3. Подписи, стилизованные строки, слоганы

Иногда нужен контролируемый перенос:

<p class="tagline">
  Быстро<br>Надежно<br>Удобно
</p>

Комментарии:

<p class="tagline">
  Быстро<br>   <!-- Каждое слово с новой строки для визуального эффекта -->
  Надежно<br>
  Удобно
</p>

Так вы явно указываете место переноса, не полагаясь на автоматический перенос браузера.

Где <br> использовать не стоит

Отступы между блоками

Неправильно:

<p>Первый абзац текста</p>
<br>
<p>Второй абзац текста</p>

Комментарии:

<p>Первый абзац текста</p>
<br> <!-- Здесь тег br используется для вертикального отступа - это плохая практика -->
<p>Второй абзац текста</p>

Лучше:

<p class="text-block">Первый абзац текста</p>
<p class="text-block">Второй абзац текста</p>

И задать отступы через CSS:

.text-block {
  margin-bottom: 16px; /* Отступ между абзацами */
}

Так верстка становится предсказуемой, адаптивной, и ее проще поддерживать.

Создание «сеток» с помощью <br>

Иногда новички пытаются выстраивать элементы в колонки или строки, используя переносы:

Иванов Иван<br>
Петров Петр<br>
Сидоров Сидор<br>
...

Это неудобно для стилизации и адаптации под мобильные устройства. Лучше использовать списки или таблицы, в зависимости от задачи.

Например, список:

<ul class="user-list">
  <li>Иванов Иван</li>
  <li>Петров Петр</li>
  <li>Сидоров Сидор</li>
</ul>

Комментарии:

<ul class="user-list">
  <li>Иванов Иван</li>   <!-- Каждый элемент списка - отдельная запись -->
  <li>Петров Петр</li>
  <li>Сидоров Сидор</li>
</ul>

<br> и CSS: как лучше управлять отступами

Почему лучше использовать CSS для отступов

Когда вы вставляете <br>, вы управляете только переносом строки, но:

• вы не можете задать через <br> размер отступа;
• разные браузеры и шрифты могут отображать высоту строки по-разному;
• вы затрудняете переиспользование разметки (например, смену дизайна).

CSS дает гибкость:

p {
  margin-bottom: 1.5rem; /* Управляем внешним отступом абзацев */
  line-height: 1.6;      /* Управляем межстрочным интервалом */
}

Давайте посмотрим на пример, где CSS решает задачу лучше, чем <br>.

Сравнение: <br> против margin

Неудачный вариант:

<p>Заголовок раздела</p>
<br><br>
<p>Основной текст раздела</p>

Лучше:

<h2 class="section-title">Заголовок раздела</h2>
<p class="section-text">Основной текст раздела</p>

CSS:

.section-title {
  margin-bottom: 24px; /* Отступ снизу у заголовка */
}

.section-text {
  margin-top: 0;       /* Можно убрать верхний отступ, чтобы не дублировать расстояния */
}

Комментарии:

.section-title {
  margin-bottom: 24px; /* Четко контролируем расстояние под заголовком */
}

.section-text {
  margin-top: 0;       /* Убираем лишний отступ, если он задан по умолчанию */
}

Так вы сохраняете семантику (заголовок действительно оформлен как <h2>), а отступами управляет CSS.

<br> в контексте доступности и семантики

Как <br> влияет на скринридеры

Скринридеры (программы, которые «читают» страницу вслух) обычно воспринимают <br> как паузу или переход на новую строку. Но если вы используете <br> вместо семантических блоков:

• пользователь может не понять структуру текста;
• навигация по документу станет сложнее.

Например, использование <p> и заголовков позволяет:

• переходить между заголовками;
• пропускать блоки;
• ориентироваться в иерархии.

Если же все разбито <br>, структура для скринридера становится «плоской».

Семантика важнее визуального результата

Если у вас есть два смысловых абзаца, даже если вы хотите, чтобы они визуально были ближе друг к другу, лучше все равно использовать два тега <p> и задать стили.

Неправильно с точки зрения семантики:

<p>Первый логический абзац<br><br>Второй логический абзац</p>

Лучше:

<p class="paragraph">Первый логический абзац</p>
<p class="paragraph">Второй логический абзац</p>

И стили:

.paragraph {
  margin-bottom: 8px; /* Небольшой отступ, если абзацы тесно связаны */
}

Так вы сохраняете правильную структуру документа.

<br> и адаптивная верстка

Проблема жестких переносов

Когда вы вставляете <br> для «красивого» переноса строки под конкретную ширину экрана, нужно учитывать, что на других устройствах это может выглядеть странно.

Например:

<p class="hero-text">
  Лучшее решение<br>для вашего бизнеса
</p>

На десктопе это может выглядеть хорошо, но на мобильном экране фраза «для вашего бизнеса» может оказаться слишком сжатой.

Если перенос не принципиален, лучше позволить браузеру самому переносить строки в зависимости от ширины.

Управляемые переносы с помощью медиа-запросов

Иногда вам все-таки нужен перенос на одной ширине экрана и отсутствие переноса — на другой. Тогда вместо <br> можно использовать CSS.

Пример: вы хотите переносить вторую часть слогана только на узких экранах.

HTML:

<p class="hero-text">
  Лучшее решение <span class="line-break">для вашего бизнеса</span>
</p>

CSS:

.hero-text {
  /* Общие стили текста */
}

/* На широких экранах отображаем текст в одну строку */
.line-break {
  white-space: nowrap; /* Запрещаем перенос внутри этой части */
}

/* На очень узких экранах разрешаем перенос */
@media (max-width: 400px) {
  .line-break {
    display: block;    /* Переводим на новую строку через CSS */
    white-space: normal;
  }
}

Комментарии:

.line-break {
  white-space: nowrap; /* Текст "для вашего бизнеса" держится в одной строке с предыдущей частью */
}

@media (max-width: 400px) {
  .line-break {
    display: block;    /* На очень узких экранах переносим эту часть на новую строку */
    white-space: normal;
  }
}

Здесь вы управляете переносом более гибко, чем если бы просто вставили <br>.

<br> в формах и интерфейсных элементах

Переносы в подписях и подсказках

В формах иногда хочется разделить длинный текст подсказки на несколько строк.

Неправильный путь — использовать <br> только для того, чтобы «подогнать» высоту поля под макет. Но если строка логически действительно должна делиться, <br> может быть уместен.

Пример:

<label for="email">
  Email<br>
  <span class="hint">Мы никогда не передадим ваш адрес третьим лицам</span>
</label>

Комментарии:

<label for="email">
  Email<br> <!-- Название поля и подсказка - с новой строки -->
  <span class="hint">Мы никогда не передадим ваш адрес третьим лицам</span>
</label>

Здесь <br> помогает визуально отделить основную подпись от пояснения.

Альтернатива через блочные элементы

То же самое можно оформить без <br>, используя блочные элементы:

<label for="email" class="field-label">
  <span class="field-title">Email</span>
  <span class="hint">Мы никогда не передадим ваш адрес третьим лицам</span>
</label>

CSS:

.field-title,
.hint {
  display: block;  /* Каждый элемент с новой строки */
}

.hint {
  font-size: 12px;
  color: #666;
}

Комментарии:

.field-title,
.hint {
  display: block;   /* Делаем элементы блочными, чтобы они располагались один под другим */
}

.hint {
  font-size: 12px;  /* Снижаем размер шрифта подсказки */
  color: #666;      /* Делаем подсказку менее заметной */
}

Такой вариант более управляемый и гибкий.

<br> и HTML-валидность

Где тег <br> разрешен

Тег <br> можно использовать:

• внутри блочных элементов, содержащих текст:
  • <p>, <div>, <section>, <article>, <footer> и т.п.;
• внутри строчных элементов:
  • <span>, <strong>, <em>, <a> и т.п.;
• внутри некоторых семантических тегов:
  • <address>, <figcaption>, <blockquote> и др.

Например:

<div>
  Наш адрес<br>
  г Самара<br>
  ул Ленина д 5
</div>

Где <br> использовать нельзя

Тег <br> не допускается:

• в <title> (заголовок страницы);
• в <style> (CSS-код);
• в <script> (JavaScript-код);
• в <select> между <option> (там переносы формируются иначе);
• в некоторых специфических контекстах, где разрешен только текст или только определенные теги.

Неправильно:

<title>Интернет-магазин<br>Одежда и обувь</title>

Верно:

<title>Интернет-магазин Одежда и обувь</title>

Если вы включите <br> в неподходящее место, HTML-валидатор укажет на ошибку, а в некоторых браузерах поведение может быть непредсказуемым.

Частые ошибки при работе с <br> и как их избежать

Ошибка 1: использование </br>

Иногда можно встретить такой код:

<p>Текст строки 1</br>Текст строки 2</p>

Тег </br> не существует в HTML. <br> — самозакрывающийся тег, у него нет закрывающей пары.

Правильно:

<p>Текст строки 1<br>Текст строки 2</p>

Комментарии:

<p>
  Текст строки 1
  <br>           <!-- Перенос строки без закрывающего тега -->
  Текст строки 2
</p>

Ошибка 2: выравнивание и отступы через <br>

Например, попытка подвинуть текст вниз:

<br><br><br>
<p>Содержимое блока</p>

Лучше использовать CSS:

<p class="content">Содержимое блока</p>

.content {
  margin-top: 48px; /* Вместо трех br создаем предсказуемый отступ */
}

Такой подход проще изменять и поддерживать.

Ошибка 3: ломка структуры документа

Пример:

<h2>Заголовок раздела<br>Продолжение заголовка</h2>

Формально это валидно, но здесь стоит задуматься, действительно ли заголовок должен быть одним заголовком, разбитым на две строки, или лучше использовать стили для переноса.

Альтернатива через CSS:

<h2 class="long-title">Заголовок раздела Продолжение заголовка</h2>

.long-title {
  max-width: 300px; /* Ограничиваем ширину, браузер сам переносит текст */
}

Комментарии:

.long-title {
  max-width: 300px; /* При сужении контейнера браузер переносит текст автоматически */
}

Если перенос нужен строго в определенной точке, <br> допустим, но лучше делать это осознанно, а не как единственный инструмент.

Ошибка 4: попытка использовать <br> для горизонтального пробела

Иногда вместо пробелов или отступов пытаются вставлять <br>, рассчитывая, что «что-то сдвинется». <br> не создает горизонтального пространства, он только переносит строку.

Для горизонтальных отступов стоит использовать:

• margin / padding в CSS;
•   (неразрывный пробел), если нужно буквально добавить пробел в тексте;
• флекс-контейнеры (display: flex), gap и другие современные средства верстки.

Резюме по правильному использованию <br>

Если коротко обобщить то, что мы разобрали:

• Тег <br> создаёт разрыв строки внутри текущего текстового потока.
• Он не должен использоваться для:
  • отступов между блоками;
  • построения сетки страницы;
  • замены семантических тегов (<p>, <h1>–<h6>, <ul> и т.д.).
• Он полезен, когда:
  • вы верстаете стихи, адреса, подписи с фиксированными строками;
  • перенос строки — часть смысла, а не просто оформление;
  • нужно явно указать место переноса внутри одного логического блока.
• Все, что связано с отступами, выравниванием и расстояниями, лучше доверить CSS, а не <br>.

Теперь давайте посмотрим на вопросы, которые часто возникают у разработчиков по теме <br>.

Частозадаваемые технические вопросы по теме статьи и ответы на них

Вопрос 1. Как сделать перенос строки в тексте, который приходит с бэкенда, где есть символ \n, но в HTML он не работает как перенос?

Ответ
Браузер не интерпретирует символ перевода строки \n как <br>. Вам нужно либо:

1. Преобразовать \n в <br> на сервере:
   • В шаблоне или при формировании строки заменить \n на <br>.
2. Или сделать это на клиенте:
   • В JavaScript заменить \n на <br> и вставлять HTML через innerHTML.

Пример на JavaScript:

// Строка с символами перевода строки
const text = 'Строка 1\nСтрока 2\nСтрока 3';

// Заменяем \n на <br>
const html = text.replace(/\n/g, '<br>');

// Вставляем в элемент как HTML
document.getElementById('output').innerHTML = html; // Здесь br отработает как перенос

Вопрос 2. Почему <br> внутри кнопки <button> ведет себя странно в разных браузерах?

Ответ
Хотя <br> допустим внутри <button>, стили по умолчанию у кнопок разные в разных браузерах. Из-за этого перенос строки может выглядеть по-разному. Надежнее:

• либо стилизовать кнопку через CSS с display: inline-flex или display: flex и разбить содержимое на элементы;
• либо контролировать высоту и выравнивание текста.

Пример:

<button class="btn">
  <span>Купить</span>
  <span>сейчас</span>
</button>

.btn {
  display: inline-flex;
  flex-direction: column; /* Текст в два ряда без br */
  align-items: center;
}

Вопрос 3. Как задать отступ после <br>, чтобы следующая строка начиналась не сразу под предыдущей?

Ответ
У самого тега <br> нельзя задать margin или padding — браузеры обычно игнорируют такие стили. Вместо этого:

• оборачивайте строки в блоки и задавайте им отступы;
• или используйте line-height для увеличения расстояния между строками.

Пример с line-height:

<p class="spaced">
  Строка 1<br>
  Строка 2<br>
  Строка 3
</p>

.spaced {
  line-height: 2; /* Увеличиваем межстрочный интервал для всех строк абзаца */
}

Вопрос 4. Можно ли скрыть конкретный <br> на мобильных устройствах?

Ответ
Напрямую спрятать <br> через CSS сложнее, так как он не имеет содержимого. Но вы можете обернуть часть текста в элемент и управлять переносом через CSS, как мы делали раньше.

Если все же нужно именно скрыть <br>, можно дать ему класс и сменить его поведение:

<p>
  Лучшее решение<br class="mobile-hidden">
  для вашего бизнеса
</p>

@media (max-width: 600px) {
  .mobile-hidden {
    display: none; /* На мобильных br не сработает, текст будет в одну строку */
  }
}

Вопрос 5. Как сделать так, чтобы <br> не ломал выравнивание по вертикали в flex-контейнере?

Ответ
Если внутри flex-элемента многострочный текст с <br> выглядит «неровно», вы можете:

• управлять высотой строки через line-height;
• задать align-items: flex-start или center (в зависимости от нужного выравнивания);
• иногда стоит заменить <br> на блочные элементы (например, <span style="display:block">).

Пример:

<div class="card">
  <p class="card-text">
    Строка 1<br>
    Строка 2
  </p>
</div>

.card {
  display: flex;
  align-items: center;  /* Центрируем контент по вертикали */
}

.card-text {
  line-height: 1.4;    /* Управляем расстоянием между строками */
}