Абзацы и переносы

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

Абзац оборачивают в . Браузер сам добавляет отступы между абзацами.

Абзац — тег

Основная единица текста на странице — абзац. Каждый абзац оборачивают в парный тег  (от англ. paragraph):

<p>Это первый абзац. В нём может быть сколько угодно текста.</p>
<p>А это уже второй, отдельный абзац.</p>

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

Важно: пробелы и переносы «схлопываются»

Новичков это удивляет. Сколько бы пробелов или пустых строк вы ни поставили в коде, браузер покажет один пробел. Вот такой код:

<p>Слова       с    кучей      пробелов
и переносом строки</p>

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

Перенос строки —

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

<p>Москва, ул. Ленина, 5<br>
офис 301<br>
этаж 3</p>

Это один абзац, но текст в нём разбит на три строки. Не используйте   для отступов между абзацами — для разных абзацев есть .

Разделительная линия — <hr>

Одиночный тег <hr> рисует горизонтальную линию. Он означает смысловой разрыв — например, переход к новой теме:

<p>Конец первой темы.</p>
<hr>
<p>Начало новой темы.</p>

Памятка

Тег	Что делает
`<p>`	абзац (парный)
`<br>`	перенос строки внутри абзаца (одиночный)
`<hr>`	разделительная линия, смена темы (одиночный)

Почему важно делить текст на абзацы

Соблазн новичка — свалить весь текст в один большой  и расставить переносы тегом  . Так делать не надо. Каждая законченная мысль — это отдельный абзац, отдельный . Правильное деление полезно сразу с нескольких сторон:

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

Запомните разницу так:  — это «новая мысль», а   — это «та же мысль, просто перенесли строку».

Итог

Текст делят на абзацы тегом ; лишние пробелы и переносы в коде браузер схлопывает.
  переносит строку внутри абзаца, но не заменяет абзацы.
<hr> — горизонтальная линия как знак смены темы.