Тег p размечает абзац - законченный кусок текста, отделённый от соседних сверху и снизу. Тег парный, собственных атрибутов нет, только глобальные. По умолчанию браузер выводит абзац блочным элементом и сам добавляет отступы сверху и снизу, по одному размеру шрифта с каждой стороны.
<p>Первый абзац текста.</p>
<p>Второй абзац - браузер отделит его от первого сам.</p>Закрывающий тег у абзаца особенный: это один из немногих случаев, когда спецификация разрешает его не писать. Подробно это разобрано в уроке курса - что будет, если не закрыть тег абзаца . Там же расписано, что допустимо внутри абзаца, а что нет.
В этой статье
Блочный тег p или строчный
Короткий ответ - блочный. Абзац занимает всю доступную ширину, начинается с новой строки и отделяется отступами от соседей.
Но за коротким ответом прячется вопрос поинтереснее. Блочность абзаца - не свойство самого тега в HTML, а значение display: block из встроенных стилей браузера. Стили можно переопределить: достаточно одной строчки p { display: inline }, и абзацы встанут в строку. Значит ли это, что тег p стал строчным?
Пример: абзацы с display inline и без него
Во втором блоке два абзаца встали в одну строку и потеряли отступы. Теги при этом не изменились - их по-прежнему два.
Внешне абзац действительно стал строчным. А вот правила разметки остались прежними, и проверить это можно наверняка. Мы взяли разметку <p>текст <div>блок</div> хвост</p> и посмотрели, что получится в структуре документа с правилом display: inline и без него. Результат совпал до символа: в обоих случаях браузер закрыл абзац перед div, и вложенности, написанной в коде, не осталось.
Причина в порядке работы. Разметку браузер разбирает первой, а стили применяет уже к готовой структуре документа - когда решение о вложенности принято и менять его поздно. Отсюда простое правило: HTML отвечает за то, что во что вкладывается, CSS - за то, как это выглядит. Свойство display меняет только вид.
Практический вывод для работы: p остаётся блочным элементом по правилам разметки, что бы ни было прописано в стилях. Если текст нужно вывести в строку, для этого есть подходящие теги вроде span, и переделывать абзац под них не требуется.
Тег p или div: что выбрать для текста
Оба тега блочные, оба занимают всю ширину, и на первый взгляд текст можно завернуть в любой из них. Разница видна сразу, если сравнить их на одном и том же тексте.
Пример: один и тот же текст тегами p и div
Текст одинаковый, разметка разная. Абзацам браузер сам дал отступы сверху и снизу, контейнерам div - нет, и строки пошли сплошняком.
Мы сверили умолчания в браузере: у абзаца отступы сверху и снизу по 16 пикселей - ровно один размер шрифта, у div нули. Разница не в том, что один тег «красивее» другого: у p есть встроенное оформление, потому что браузер знает, что это абзац текста. Про div он не знает ничего - это контейнер без собственного смысла.
Отсюда и правило выбора, которое не требует запоминания. Если внутри - связный текст, который читают как абзац, это p. Если внутри другие блоки, которые нужно сгруппировать или подвинуть, это div. Второй случай ещё и обязывает: вложить div или список внутрь абзаца не выйдет, браузер закроет абзац раньше - разбор этого есть в уроке, в разделе что можно размещать внутри абзаца .
Отдельно стоит сказать про довод, который часто приводят в обсуждениях: якобы поисковые системы лучше относятся к тексту в p, чем в div. Обещать прибавку к позициям за выбор тега никто не может, и строить решение на этом не стоит. Настоящих доводов хватает и без того: текст в div теряет отступы и требует отдельных стилей, а разметка перестаёт сообщать программам, где кончается один абзац и начинается другой.
Атрибут align: почему он перестаёт работать
В старых учебниках и в унаследованном коде до сих пор попадается разметка вида <p align="center">. Атрибут задавал выравнивание текста прямо в теге, без всякого CSS, и выглядит он заманчиво просто.
Из стандарта его убрали давно, но браузеры продолжают его применять - иначе миллионы старых страниц разъехались бы за одну ночь. Отсюда и ложное впечатление: атрибут работает, значит, им можно пользоваться. Ловушка в том, при каких условиях он работает.
Такие атрибуты браузер превращает во внутреннюю подсказку для стилей, и у этой подсказки нулевой вес - её перебивает любое правило CSS, которое трогает выравнивание у того же элемента. Мы проверили: абзацу с align="center" хватило одного правила text-align: left, чтобы выравнивание по центру исчезло. Не одного правила с длинным селектором - любого.
На практике это выглядит так. Автор прописывает выравнивание атрибутом, у себя всё встаёт по центру. Потом к странице подключают тему оформления или готовый набор стилей - и текст молча съезжает влево. Ошибки браузер не покажет, в консоли ничего не появится: атрибут просто уступает место стилям. Искать такое неприятно.
Заменяется он одной строчкой CSS, и заодно перестаёт зависеть от того, какие стили подключат к странице следующими.
<p class="lead">Текст по центру</p>
.lead { text-align: center; }Частые ошибки
Ошибки с абзацем растут из двух источников: из попыток управлять внешним видом прямо в разметке и из привычки заворачивать в абзац то, что абзацем не является.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
Пустые <p></p> ради отступа | В документе появляются абзацы без текста, а высота отступа остаётся случайной | Задать расстояние свойством margin |
Выравнивание задано атрибутом align | Работает, пока к странице не подключили стили, потом молча пропадает | Применить text-align в CSS |
Абзацы текста размечены тегом div | Текст теряет отступы, разметка не сообщает, где границы абзаца | Применить p, а div оставить для группировки блоков |
Абзац сделан строчным через display ради вёрстки | Вид меняется, правила вложенности - нет, а отступы приходится возвращать вручную | Применить span там, где нужен строчный элемент |
