Параграфы и переносы

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

Зачем нужно

Правильное использование <p> и <br> — основа семантической текстовой разметки. <p> не только визуально разделяет текст, но и несёт структурный смысл: screen reader делает паузу между параграфами. Злоупотребление <br> вместо <p> — признак некачественной вёрстки: отступы между «параграфами» из <br> не семантичны и не масштабируются через CSS.

Где используется

  • <p> — любой блочный текст: статьи, описания, подписи
  • <br> — адреса, стихи, строфы, форматированный текст (где перенос строки семантически важен)
  • <wbr> — длинные URL, технические строки в узких контейнерах

<p> — параграф

<article>
  <h1>Введение в HTML</h1>

  <p>HTML (HyperText Markup Language) — язык разметки, который описывает структуру веб-страниц. Браузер читает HTML и отображает его как форматированный документ.</p>

  <p>Каждый HTML-документ состоит из элементов — тегов, которые оборачивают содержимое и задают ему смысловую роль.</p>
</article>

<p> — блочный элемент. Вложить в него другой блочный элемент (например, <div>) нельзя:

<!-- Неправильно: блочный элемент внутри <p> -->
<p>Текст <div>блок</div> текст</p>

<!-- Правильно: inline-элементы внутри <p> -->
<p>Текст <strong>жирный</strong> и <a href="#">ссылка</a></p>

<br> — перенос строки

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

<!-- Адрес — перенос смысловой -->
<address>
  ООО «Пример»<br>
  Москва, ул. Примерная, д. 1<br>
  Россия, 123456
</address>

<!-- Стихотворение -->
<p>
  В начале было Слово,<br>
  и Слово было HTML,<br>
  и HTML был правильным.
</p>

НЕ используй <br> для создания отступов между блоками:

<!-- Плохо: <br> для отступа -->
<p>Первый абзац.</p>
<br>
<br>
<p>Второй абзац.</p>

<!-- Хорошо: CSS margin -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>

p + p { margin-top: 1.5em; }

<wbr> — мягкий перенос

Браузер может перенести строку в этом месте, если это необходимо:

<!-- Длинный URL без пробелов -->
<p>
  Документация: https://developer.mozilla.org<wbr>/ru<wbr>/docs<wbr>/Web<wbr>/HTML
</p>

<!-- Технические строки -->
<code>some<wbr>_very<wbr>_long<wbr>_variable<wbr>_name</code>

<wbr> не добавляет дефис — только разрешает перенос.

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

Ошибка Почему плохо Как правильно
<br><br> вместо <p> Нет семантики, плохо масштабируется Используй <p> для абзацев
Блочный элемент внутри <p> Браузер закрывает <p> автоматически, DOM ломается Только inline-элементы внутри <p>
<p> для любого отступа Пустые параграфы — мусор в DOM Управляй отступами через CSS margin
Пробелы/переносы в HTML для форматирования Браузер игнорирует множественные пробелы Используй CSS или <pre> для преформатированного текста

Связанные темы

Ресурсы