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

Тег <br> — старейший способ сделать перенос строки в HTML. Он прост, как молоток: поставили тег — и текст прыгнул на новую строку. Но именно из-за этой простоты у <br> сложилась неоднозначная репутация. В одних случаях без него не обойтись — например, в стихах, адресах или подписях. А в других его использование ломает семантику, мешает адаптивности и загрязняет код. 

Разберёмся, как работает этот тег, когда он оправдан и какие есть современные альтернативы для переноса текста без потери смысла.

Что такое перенос строки в HTML и зачем он нужен?

Когда мы пишем текст в HTML, браузер видит его не как «поток слов», а как набор элементов с чёткой логикой. И если мы просто нажмём Enter в редакторе, браузер это проигнорирует — он не сделает перенос строки. Для него новая строка начинается только тогда, когда в коде явно сказано: «тут разрыв».

Для этого и существует тег <br>. Он не создаёт новый абзац, не добавляет отступы, а просто переносит курсор на следующую строку. 

Перенос строки нужен в тех ситуациях, где текст связан по смыслу, но должен быть визуально разбит: адрес, стихи, подписи, технические данные. Везде, где «новая строка» не означает «новая мысль».

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

Тег <br> — основной инструмент переноса

Тег <br> — сокращённо от line break, появился ещё в первых версиях языка и официально вошёл в спецификацию HTML 2.0 в 1995 году. С тех пор он почти не менялся. Его главная задача — сделать перенос строки внутри текста, не создавая новый абзац и не добавляя лишних отступов.

Синтаксис и правильное написание тега

HTML-синтаксис такой:

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

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

В HTML5 допустимы оба варианта записи: просто <br> и <br />. Вариант со слешем — это наследие XHTML. В современном HTML можно (и нужно) писать просто <br>.

Важно помнить, что тег не добавляет отступов между строками, не создаёт новый блок и не влияет на семантику. Это просто технический сигнал браузеру при отрисовке страницы: «Перейди на новую строку».Если нужно больше пространства — используйте CSS, чтобы задать высоту строки, а не выстраивать цепочку <br><br><br>:

p {
  line-height: 1.6;
}

Атрибуты тега <br> (актуальные и устаревшие)

Современный <br> не имеет уникальных атрибутов — он поддерживает только глобальные (например, class, id, style, hidden и т. д.).

Когда-то во времена табличной вёрстки у <br> был атрибут clear. Он управлял тем, как текст ведёт себя рядом с плавающими элементами (float) — например, с картинкой, прижатой к левому краю.

<br clear="left">

Этот атрибут говорил браузеру: «начни следующую строку ниже всех элементов, которые смещаются слева». То есть, если у вас был текст, обтекающий картинку, clear=”left” сдвигал новую строку вниз, чтобы она не налипала на неё.

Такой приём сейчас выглядит как привет из 2005-го: он устарел и не нужен, потому что всё то же самое решается через CSS:

.clearfix {
  clear: both;
}

Короче говоря, в современном HTML <br> — тег без настроек. Он просто делает перенос строки, а всё остальное задаётся через CSS.

Практические примеры использования <br>

Бывают ситуации, когда <br> незаменим. Например, когда текст остаётся частью одного блока по смыслу, но требует визуального разделения строк. Дальше посмотрим на примерах.

Перенос в почтовых адресах и контактной информации

На некоторых сайтах можно встретить контактную информацию в виде текстового блока, где каждая строка разделена с помощью тега <br>.

Например:

Такое оформление удобно визуально: адрес и контакты воспринимаются цельно, а <br> аккуратно расставляет переносы там, где логически начинается новая строка.

Но с точки зрения семантики и доступности решение так себе. Всё содержимое находится внутри одного <div> (или абзаца <p>), хотя по смыслу это разные типы информации — адрес, режим работы, контакты. Для поисковиков и скринридеров такая структура неочевидна: они не понимают, где заканчивается адрес и начинается телефон.

Более корректно оформить это с разделением по смыслу: адрес — в <address>, а режим и контакты — отдельными блоками.

<section class="contacts">
  <h3>Библиотека им. Лермонтова</h3>
  <address>
    Стремянная ул., д. 20<br>
    Ст. м. «Маяковская»
  </address>
  <div class="schedule">
    <strong>Режим работы:</strong><br>
    Пн–пт: 9:00–20:00<br>
    Сб: 10:00–18:00<br>
    Вс — выходной
  </div>
  <div class="connections">
    <strong>Телефон:</strong><br>
    <a href="tel:+78125723065">8 (812) 572-30-65</a><br>
    <strong>Эл. почта:</strong><br>
    <a href="mailto:biblio03@lplib.ru">biblio03@lplib.ru</a>
  </div>
</section>

Так код остаётся визуально аккуратным, но при этом становится семантически корректным: <address> явно указывает, что это контактная информация, а скринридеры смогут правильно её озвучить.

Форматирование стихотворений и цитат

Иногда поэтический текст или цитата набирается в едином контейнере — например, в <div> со своим классом, без разбивки на абзацы <p>. При этом каждая строка разделена с помощью тега <br>:

Такой подход сохраняет структуру стихотворения: браузер не добавляет лишних отступов, а строки идут подряд, как задумано автором.

Опять же, семантически это не очень (ведь <div> не несёт смысловой нагрузки, а <p> — да), но в данном случае допустимо. Каждая строка остаётся частью одного блока, и использование <br> здесь оправданно: перенос отражает формат, а не смысловое деление текста.

Если бы каждая строфа имела смысловую завершённость — их стоило бы обернуть в отдельные <p>. Но когда важен именно ритм строк, <br> внутри контейнера — логичное решение.

Использование в формах и подписях

Иногда <br> встречается в коде форм — особенно на старых сайтах, где разметка собиралась вручную, без CSS-гридов и флексбокса. Например, вот типичный фрагмент HTML:

<fieldset>
  <legend>Заполните, пожалуйста, форму</legend>
  <form method="post">
    <br>
    <table style="width:100%;">
      <tr>
        <td><p>Имя:</p></td>
        <td><input type="text" name="name"></td>
      </tr>
      <tr>
        <td><p>Город, пгт, село:</p></td>
        <td><input type="text" name="city"></td>
      </tr>
    </table>
    <br>
    <div align="right">
      <input type="submit" value="Отправить">
    </div>
  </form>
</fieldset>

Здесь <br> используется для добавления визуальных разрывов вокруг таблицы и между секциями формы. Это типичный приём времён, когда CSS только начинал вытеснять встроенные атрибуты (align, width, border).

Что с этим не так:

Современные формы делают на гибких контейнерах и чистой структуре:

<form class="contact-form">
  <label>Имя <input type="text" name="name"></label>
  <label>Город <input type="text" name="city"></label>
  <button type="submit">Отправить</button>
</form>

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

Такой подход проще, чище и адаптивнее: никаких <br> для отступов и таблиц — всё управляется стилями, а HTML описывает смысл, а не внешний вид.

Альтернативные методы переноса строки

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

CSS свойство white-space и его значения

Если нужно, чтобы браузер сохранял переносы и пробелы именно так, как они записаны в HTML-коде, то используйте свойство white-space. Оно управляет тем, будет ли браузер схлопывать пробелы и игнорировать переводы строк или, наоборот, отображать их как есть.

Самые полезные значения:

/* по умолчанию — браузер сам переносит строки */
white-space: normal;
/* запрещает переносы вообще */
white-space: nowrap;
/* сохраняет все пробелы и переносы, как в <pre> */
white-space: pre;
/* сохраняет только переносы строк */
white-space: pre-line;
/* сохраняет всё, но разрешает переносы по краю */
white-space: pre-wrap;

Рассмотрим пример со стихами:

<p class="poem">
  У лукоморья дуб зелёный;
  Златая цепь на дубе том;
  И днём и ночью кот учёный
  Всё ходит по цепи кругом;
</p>

Прописываем абзацу стили:

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

Блочные элементы vs строчные элементы

Иногда «перенос» нужен не в тексте, а между элементами. И тут важно понимать: блочные элементы (divх, p, section) и строчные (span, a, [/tags]strong[/tags]) ведут себя по-разному:

Например:

<p>Текст <span>внутри строчного</span> элемента, он продолжается в одной строке.</p>
<div>А это уже блочный элемент — он начнётся с новой строки.</div>
<p>А вот ещё один абзац — тоже блочный.</p>

Здесь <span> встроен прямо в текст, а <div> и <p> «падают вниз», потому что блочные.

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

То есть вот так делать не нужно:

<div>Карточка 1</div>
<br>
<div>Карточка 2</div>

Потому что тот же эффект даёт обычный CSS-отступ:

div + div {
  margin-top: 1em;
}

А вот внутри строчных элементов, где текст идёт в одну линию, <br> действительно может быть нужен, например в подписях, коротких фразах или тегах:

<span>
  Цена:<br>
  499 ₽
</span>

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

Использование псевдоэлементов для декоративных переносов

Иногда дизайнер хочет, чтобы заголовок красиво делился на две строки, но при этом в HTML всё оставалось одним предложением. 

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

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

Поэтому особо изобретательные верстальщики придумали делать перенос через CSS — не потому, что он реально нужен, а просто чтобы было «как в макете». Так родился декоративный перенос — когда код страдает ради визуальной гармонии.

Идея такая: добавить символ перевода строки через свойство content: в псевдоэлементе ::before или ::after. Выглядит это примерно так:

figcaption::before {
  content: 'Figure \A' attr(title);
  white-space: pre;
}

Здесь мы задаём перенос строки в подписи к изображению — тег <figcaption> как раз используется для подписей под <figure>. То есть перед текстом подписи (Figure …) вставляется искусственный разрыв строки, созданный через CSS.

\A — это CSS-аналог \n, символ новой строки. А свойство white-space: pre; заставляет браузер воспринимать \A как настоящий перенос. Если его убрать, ничего не произойдёт — строка останется одной линией.

Но объективно это костыль. Он ломает адаптивность и предсказуемость вёрстки, не всегда срабатывает, и нужно повозиться со свойствами display, white-space и типом элемента.Если реально нужно визуально разделить заголовок, то лучше обернуть нужное слово в <span> и задать ему display: block;

<h2 class="title">
  Наши <span class="break">преимущества</span>
</h2>

.break {
  display: block;
}

Получится вот так:

Особенности работы переносов в разных браузерах

Казалось бы, <br> настолько простой тег, что сломать его невозможно.

Но нет, браузеры умеют удивлять даже на ровном месте. Разница чаще проявляется не в самом переносе, а в том, как движок интерпретирует пробелы, отступы и шрифтовую метрику вокруг него.

Кросс-браузерная совместимость тега <br>

Тег <br> поддерживается всеми браузерами с конца 90-х — от IE 5 до последнего Safari. Он ведёт себя одинаково в Chrome, Firefox, Edge и даже в старом Internet Explorer.

Но есть нюансы:

В целом <br> — это тот редкий случай, когда всё проще, чем кажется: если у вас не работает перенос строки, проблема почти наверняка не в нём, а в соседних стилях.

Решение возможных проблем отображения

Если после вставки <br> отступы поехали и всё выглядит не так, как задумано, то почти всегда дело в стилях. Вот на что стоит обратить внимание:

Ну и самое главное: тестируйте вёрстку на разных устройствах. Особенно важно всё проверить на мобилках: системные шрифты и алгоритмы рендеринга текста могут менять интервалы между строками.

Полезный блок со скидкой

Если вам интересно разбираться со смартфонами, компьютерами и прочими гаджетами и вы хотите научиться создавать софт под них с нуля или тестировать то, что сделали другие, — держите промокод Практикума на любой платный курс: KOD (можно просто на него нажать). Он даст скидку при покупке и позволит сэкономить на обучении.

Бесплатные курсы в Практикуме тоже есть — по всем специальностям и направлениям, начать можно в любой момент, карту привязывать не нужно, если что.