Абзац < p > и перенос < br > (HTML)

В HTML есть два похожих на первый взгляд элемента, которые влияют на расположение текста: <p> (абзац) и <br> (перенос строки). Часто их путают: ставят <br> там, где нужен абзац, или делают несколько <br> подряд, чтобы «отодвинуть» текст.

Что делает каждый тег

• <p> — это семантический блок, обозначающий абзац. Он несёт смысл: «это отдельный смысловой кусок текста». Браузер по умолчанию добавляет отступы сверху и снизу.
• <br> — это принудительный перенос строки внутри одного блока. Он не несёт смысловой нагрузки: «здесь надо перейти на следующую строку». У него нет закрывающего тега.

Важно: оба тега про структуру и смысл, а не про «красиво выглядит». Внешний вид настраивают через CSS.

Когда нужен <p>

Используйте <p>, когда у вас есть отдельный смысловой фрагмент. Это почти всегда основной способ верстать обычный текст на странице.

Пример

<p>Это первый абзац. В нём рассказывается про суть задачи.</p>
<p>А это второй абзац — про решение. Они логически отделены друг от друга.</p>

Ещё примеры, где <p> уместен

• Основной текст статьи, новости, описания товара.
• Подписи к картинкам, если это полноценный текст, а не одно слово.
• Текстовые блоки в карточках товаров, инструкциях, FAQ.

Когда уместен <br>

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

Примеры, когда <br> оправдан

1. Стихи и тексты, где важен именно визуальный перенос строк.
   html

   <p>
     Буря мглою небо кроет,<br>
     Вихри снежные крутя;<br>
     То, как зверь, она завоет,<br>
     То заплачет, как дитя.
   </p>

   Обратите внимание: стих всё равно лежит в <p>, потому что это один смысловой блок, а <br> только задаёт нужные переносы.

2. Почтовые адреса, где структура строк важна для читаемости.
   html

   <p>
     ООО «Вектор»<br>
     125009, Москва, ул. Примерная, д. 10<br>
     офис 305
   </p>

3. Короткие строки с переносом по смыслу, но без создания нового абзаца.Иногда так оформляют слоганы или подписи, где дизайнерски важно разорвать строку, но смыслово это один блок.

Частые ошибки и как их исправить

Ошибка 1: несколько <br> вместо абзацев

Плохо:

Это первый смысловой блок.<br><br>
А это второй смысловой блок.

Здесь два смысловых куска, но они не обозначены семантически. Для скринридеров и SEO это выглядит как одна длинная строка с разрывами.

Правильно:

<p>Текст.</p>
<br><br><br>
<p>Следующий текст.</p>

Ошибка 2: <br> для отступов

Плохо:

<p>Текст.</p>
<br><br><br>
<p>Следующий текст.</p>

Так пытаются сделать «пустое место». Это неправильно: <br> не для отступов.

Правильно — через CSS:

p {
  margin-bottom: 24px;
}

Или, если нужен больший отступ у конкретного абзаца:

<p class="big-gap">Текст.</p>
<p>Следующий текст.</p>
 
<style>
  .big-gap {
    margin-bottom: 40px;
  }
</style>

Ошибка 3: <br> в середине предложения ради «красоты»

Плохо:

<p>Мы предлагаем лучшие<br> условия на рынке.</p>

Для скринридера это звучит странно, а при изменении ширины экрана перенос может «поехать» и сломать смысл.

Правильно — либо оставить как есть, либо перефразировать, либо управлять переносами через CSS (например, white-space или word-break), но не через <br>.

Практические советы

• По умолчанию используйте <p> для любого обычного текста. Это безопасно, семантично и удобно.
• <br> — только для настоящих разрывов строк внутри одного смыслового блока: стихи, адреса, редкие случаи, где перенос важен по смыслу и не должен зависеть от ширины экрана.
• Никогда не используйте <br> для создания отступов. Отступы — это задача CSS (margin, padding).
• Проверяйте, как страница читается скринридером. Если структура кажется странной (например, длинные строки с кучей <br>), скорее всего, вы используете теги неправильно.

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