Если между двумя словами в HTML-коде поставить хоть пять пустых строк подряд, браузер покажет их слитно, без единого отступа - пустая строка в коде для него ничего не значит. Чтобы текст на странице реально делился на смысловые куски - абзацы, - нужен конкретный тег, а не пробелы. Разберём, как он работает и какие у него есть особенности.
В этом уроке
Попробуй добавить третий <p> или, наоборот, убрать один из тегов и оставить просто текст без него - результат справа сразу покажет разницу.
Что делает тег <p> и чем абзац отличается от пустой строки в коде
Тег <p> - не просто про отступ. Он помечает кусок текста как отдельный смысловой блок: браузер сам добавляет отступы сверху и снизу - это часть стиля браузера по умолчанию, а не заслуга пробелов в коде. А главное - по этим границам поисковик и программы для чтения с экрана понимают, где заканчивается одна мысль и начинается следующая.
<p>Первый абзац.</p><p>Второй абзац - уже с отступом сверху.</p> - два тега <p> - два самостоятельных смысловых блока.
<p>Первый абзац.
Второй абзац - просто пустые строки в коде.</p> - пустые строки внутри одного <p> ничего не меняют: для браузера это по-прежнему один абзац.
Что можно класть внутрь <p>, а что нельзя
Внутрь <p> можно класть только строчный контент: обычный текст и строчные теги вроде <strong>, <em>, <a>, <br>. А вложить в <p> другой <p> или любой блочный тег - <div>, <ul>, заголовок и подобные - по правилам HTML нельзя: увидев такой тег, браузер сам, без предупреждений, закроет открытый <p> раньше, чем закрыли его в коде, и итоговая структура страницы разойдётся с тем, что написано в разметке.
<p>Этот абзац содержит <strong>важный текст</strong> и <a href="#">ссылку</a> - всё это строчный контент.</p><p>Этот абзац пытается вложить блочный элемент:
<div>Блок внутри абзаца</div>
</p>Браузер закроет <p> сам перед <div> - итоговая вложенность будет не такой, как в коде.
Что будет, если не закрыть </p>
У закрывающего тега </p> есть особый статус: по спецификации HTML5 его можно не писать, если сразу после <p> идёт один из блочных тегов (например <div>, заголовок, <ul>, <table> или ещё один <p>) - тогда браузер закроет предыдущий <p> сам. Но если после незакрытого <p> идёт просто текст или строчный тег, автоматического закрытия не произойдёт - и весь дальнейший текст останется частью того же самого абзаца, а не начнёт новый.
<p>Первый абзац.</p><p>Второй абзац.</p> - оба абзаца закрыты явно, граница между ними видна прямо в коде.
<p>Первый абзац без закрывающего тега. Второй абзац на самом деле остаётся частью первого</p> - границы нет, потому что после первого абзаца не появилось ни одного из тегов, при которых <p> закрывается сам.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Несколько <br> подряд вместо нового <p>, чтобы «сделать отступ» |
Семантически всё остаётся одним абзацем с визуальными переносами - программы чтения с экрана не увидят разделения на смысловые блоки | Использовать новый <p> для нового смыслового блока, а <br> - только для переноса строки внутри одного абзаца |
| Настраивать отступ между абзацами пустыми строками или пробелами в коде | Браузер их полностью игнорирует - HTML схлопывает лишние пробелы и переносы по умолчанию | Настраивать отступы через CSS-свойство margin |
Вкладывать блочный тег (<div>, <ul>, заголовок) внутрь <p> |
Браузер закрывает <p> раньше, чем в коде - итоговая структура страницы не совпадает с разметкой |
Класть в <p> только текст и строчные теги, а блочные элементы располагать рядом, а не внутри |
Не закрывать </p>, рассчитывая, что браузер разберётся сам |
Автозакрытие работает только перед определённым списком тегов - перед обычным текстом или строчным тегом граница между абзацами не появится | Всегда закрывать </p> явно, не полагаясь на список исключений |
Шпаргалка
| Термин | Значение |
|---|---|
<p> | Тег абзаца - отдельный смысловой блок текста |
Разрешённый контент внутри <p> | Только текст и строчные теги (<strong>, <em>, <a>, <br> и подобные) |
| Отступы между абзацами | Часть стиля браузера по умолчанию; настраиваются через CSS margin, а не пробелами в коде |
Автозакрытие <p> | Происходит только перед определённым списком блочных тегов (<div>, заголовки, <ul>, <table>, ещё один <p> и другие) |
| Надёжная привычка | Всегда закрывать </p> явно, не полагаясь на автозакрытие |
Коротко: отвечаем на вопросы
Нужно ли всегда закрывать тег </p>?
По спецификации HTML5 закрывающий тег можно опустить, если сразу после <p> идёт один из блочных тегов или разметка на этом заканчивается - браузер закроет <p> сам. Но полагаться на это рискованно: если рядом случайно окажется обычный текст или строчный тег, автозакрытия не будет. Поэтому на практике </p> принято закрывать всегда, даже когда по спецификации это не обязательно.
Можно ли вложить один <p> в другой или, например, <div> внутрь <p>?
Нет - по правилам HTML тег <p> может содержать только текст и строчные теги. Как только внутри открытого <p> встречается другой <p> или блочный тег вроде <div>, браузер автоматически закрывает первый <p>, и итоговая вложенность на странице получается не такой, как в коде.
Чем тег <p> отличается от <br> и когда вместо нового абзаца нужен перенос строки?
<p> создаёт отдельный смысловой блок с отступами - новую мысль или тему. <br> просто переносит строку внутри одного и того же абзаца, не создавая нового смыслового блока - он уместен там, где по смыслу это всё ещё одна мысль, просто визуально в несколько строк: например, в адресе или в строках стихотворения.
