Абзац в HTML размечают тегом <p>: текст ставят между открывающим <p> и закрывающим </p>, и браузер выводит его отдельным блоком с отступами сверху и снизу. На каждую мысль заводят свой <p>, а внутрь кладут только строчное содержимое: текст, ссылки, выделение, картинки.
Красную строку, интервалы и выравнивание задают в CSS, атрибутами самого тега их не настраивают. Если разметку вы видите впервые, начните с обзора что такое HTML и из чего состоит страница, а сюда возвращайтесь за деталями про абзацы. Если хотите разобрать разметку с преподавателем, курсы собраны в каталоге по HTML.
CheckroiПодборка курсов по HTML209 курсов • 43 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→
Как написать тег p: синтаксис и пример
Тег парный. Минимальный рабочий пример выглядит так:
<p>Это первый абзац.</p>
<p>Это второй абзац. Браузер покажет его с новой строки.</p>- Откройте
<p>там, где начинается абзац. - Напишите текст. Внутри допустимы ссылка
<a>, выделение<strong>и<em>, картинка<img>, перенос<br>, строчный контейнер<span>. - Закройте абзац тегом
</p>. - Следующую мысль оформите новым
<p>. Пустая строка в коде разрывом абзаца не считается.
Название тега пошло от английского paragraph. Поэтому в справочниках его зовут то абзацем, то параграфом: речь об одном и том же элементе. С этого тега начинается почти любой учебный план, в том числе путь, описанный в статье как стать фронтенд-разработчиком.
Что браузер делает с абзацем по умолчанию
В разделе спецификации HTML о стилях по умолчанию для абзаца прописаны две строки: display: block и margin-block: 1em. Абзац занимает всю ширину родителя, начинается с новой строки и получает отступ сверху и снизу, равный размеру шрифта.
Мы проверили это в Chrome на странице без стилей. При стандартном шрифте 16 px у <p> отступ 16 px сверху и 16 px снизу, а между двумя соседними абзацами видно те же 16 px, а не 32. Вертикальные отступы соседних блоков схлопываются, и браузер берёт больший из двух.
| Что | По умолчанию | Чем поменять в CSS |
|---|---|---|
| Тип блока | блочный, с новой строки | display |
| Отступ сверху и снизу | 1em (16 px при стандартном шрифте) | margin |
| Межстрочный интервал | normal, зависит от шрифта |
line-height |
| Выравнивание | по началу строки (для русского текста влево) | text-align |
| Пробелы и переносы в коде | склеиваются в один пробел | white-space |
Последняя строка таблицы удивляет новичков чаще других. Сколько бы пробелов и переводов строки вы ни поставили внутри <p>, браузер покажет на их месте один пробел. Разрыв строки внутри абзаца делают тегом <br>, а сохранить форматирование как в коде помогает white-space: pre-line или тег <pre>.
Что можно и нельзя класть внутрь p
Спецификация называет содержимое абзаца фразовым контентом. Это текст и строчные теги, которые размечают кусок фразы, а не целый блок страницы.
| Можно | Нельзя |
|---|---|
текст, <a>, <span> |
другой <p> |
<strong>, <em>, <mark>, <code> |
<div>, <section>, <article> |
<img>, <br>, <sup>, <sub> |
списки <ul> и <ol>, таблицу <table> |
<label>, <input>, <button> |
заголовки <h1>–<h6>, <blockquote>, <pre> |
Поля формы внутри абзаца выглядят неожиданно, но спецификация приводит такой пример сама: подпись и поле ввода в одном <p> вполне законны. Так что абзац в HTML описывает любую смысловую группу строчного содержимого, текст в ней необязателен.
Абзацы и заголовки
Заголовок <h2> называет раздел, абзацы под ним раскрывают его мысль за мыслью. Заголовок внутрь <p> не вкладывают, а жирный абзац заголовком не делают: для скринридеров и поисковых роботов структура страницы строится на тегах <h1>–<h6>. Как ставить ссылки внутри абзаца, показано в статье о гиперссылках.
Какие атрибуты есть у тега p
Собственных атрибутов у тега нет, ему доступны только глобальные, общие для всех тегов. Так сказано и в спецификации WHATWG, и в справочнике MDN. На практике чаще всего нужны семь из них.
| Атрибут | Зачем | Пример |
|---|---|---|
class |
подключить стиль из CSS-файла | <p class="lead"> |
id |
якорь для ссылки и обращения из скрипта | <p id="intro"> |
style |
стиль прямо в теге, для одного абзаца | <p style="color: #555"> |
lang |
язык фрагмента для скринридера и переносов | <p lang="en"> |
title |
подсказка при наведении курсора | <p title="Пояснение"> |
hidden |
скрыть абзац со страницы | <p hidden> |
data-* |
свои данные для JavaScript | <p data-step="2"> |
Атрибут align устарел. Запись <p align="right"> до сих пор встречается в старых учебниках и тестах по информатике и означает, что текст выровнен по правому краю. Chrome её ещё понимает, но валидатор W3C считает её ошибкой: атрибут устарел, используйте CSS.
Решение: вместо align пишите text-align: right в стилях. С остальными атрибутами работают так же, как с любым тегом, подробнее о селекторах по классу и id в статье что такое CSS и как его подключить.
Тег p в задачах по информатике
В школьных тестах про HTML абзац встречается в двух формулировках, и обе проверяют одно и то же.
- «Каким тегом задаётся абзац?» Ответ:
<p>, от paragraph. - «Что означает
<p align="right">?» Ответ: текст абзаца выровнен по правому краю. Атрибут принимал значенияleft,center,rightиjustify.
В тестах до сих пор используют старую запись через align, хотя в настоящей вёрстке её заменил CSS. Отвечайте так, как спрашивают, а на сайте пишите text-align.
Как оформить абзац через CSS
Вид абзаца целиком задаётся в стилях. Свойства текста подробно разбирают на курсах по CSS, а базовый набор, с которого удобно начинать, такой:
p {
margin: 0 0 1em; /* отступ только снизу */
line-height: 1.5; /* межстрочный интервал */
max-width: 65ch; /* строка около 65 символов */
}Красная строка
Отступ первой строки задаёт свойство text-indent. В книжной традиции его ставят вместо пустой строки между абзацами, поэтому вертикальный отступ заодно убирают:
p {
margin: 0;
text-indent: 1.5em;
}Отступы между абзацами
Отступ меняют через margin. Чтобы последний абзац в карточке не оставлял лишнее место снизу, ему обнуляют нижний отступ:
.card p:last-child {
margin-bottom: 0;
}Выравнивание, шрифт и цвет
text-align: left | center | right | justifyвыравнивает строки.font-sizeиfont-familyзадают размер и гарнитуру.colorменяет цвет текста.
У выравнивания по ширине есть ловушка: без переносов между словами появляются широкие «реки» пробелов. Переносы включает hyphens: auto вместе с lang="ru" у страницы, но поддержка зависит от браузера и языка. Для узких колонок надёжнее оставить выравнивание влево. Как текстовые блоки укладывают в колонки и сетки, рассказано в разборе профессии HTML-верстальщика.
Обрезать длинный текст многоточием
Одну строку обрезают тремя свойствами, несколько строк режет -webkit-line-clamp. Оба варианта мы прогнали в Chrome: текст обрезается, многоточие появляется.
/* одна строка */
.one-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* две строки */
.two-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}Чем p отличается от br, div и span
Все четыре тега влияют на то, как текст разбит на строки и блоки. Разница в смысле, который они несут.
| Тег | Что это | Когда брать |
|---|---|---|
<p> |
абзац, законченная мысль | связный текст из одного или нескольких предложений |
<br> |
перенос строки внутри абзаца | стихи, почтовый адрес, где разрыв строки и есть содержание |
<div> |
блок без смысла | обёртка для раскладки, группа из нескольких элементов |
<span> |
строчный контейнер без смысла | покрасить или пометить слово внутри абзаца |
Простое правило: если тянет поставить два <br> подряд ради отступа, на самом деле начался новый абзац. Если внутри должен оказаться список или таблица, нужен <div> или несколько отдельных блоков. Как из таких кирпичей собирают страницу, разобрано в статье о вёрстке сайтов.
Частые ошибки с тегом p
Блок внутри абзаца
Симптом: под абзацем появляется лишний пустой отступ, а стили абзаца не действуют на вложенный блок. Причина в том, что внутрь абзаца можно класть только строчное содержимое. Встретив <div>, <ul>, <table> или заголовок, браузер сам закрывает абзац.
Вот что Chrome построил из такого кода:
<!-- было в файле -->
<p>Текст<div>Блок</div></p>
<!-- стало в браузере -->
<p>Текст</p><div>Блок</div><p></p>Лишний </p> превратился в пустой абзац со своими отступами. Валидатор W3C на этот код отвечает ошибкой No p element in scope but a p end tag seen: закрывающий тег встретился там, где открытого абзаца уже нет.
Решение: замените внешний
<p>на<div>или вынесите список и таблицу за пределы абзаца.
Пустой абзац ради отступа
Конструкции <p></p> и <p> </p> дают просвет на экране, но мешают людям со скринридером: программа объявляет пустой абзац. На это прямо указывает раздел о доступности в MDN.
Решение: нужен больший просвет, увеличьте
marginу соседнего абзаца.
Незакрытый тег
Спецификация разрешает не писать </p>, если дальше идёт блочный тег или родитель заканчивается. Однако строчные теги и текст после незакрытого абзаца остаются внутри него.
В нашем тесте подпись в <span>, написанная строкой ниже, попала в тот же абзац, хотя задумывалась отдельно. Двойной вложенный абзац <p>Первый<p>Второй браузер, наоборот, разбивает на два соседних.
Решение: закрывайте абзац всегда, так код читается однозначно и для людей, и для валидатора.
Стиль не применяется
Вы пишете p { color: red; }, а цвет не меняется. Обычно в теме уже есть правило с более сильным селектором, например .article p, или стиль задан в атрибуте style.
Решение: откройте инструменты разработчика (в Chrome правый клик по абзацу, пункт «Просмотреть код»), найдите перечёркнутое правило во вкладке стилей и усилите свой селектор до того же уровня.
Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в каналКак создать абзац из JavaScript
Скрипт добавляет абзац на страницу в три строки: создаёт элемент, кладёт в него текст и вставляет в нужный контейнер. Код проверен в Chrome:
const p = document.createElement('p');
p.textContent = 'Новый абзац';
document.querySelector('#content').append(p);Свойство textContent безопаснее, чем innerHTML: текст от пользователя не превратится в разметку. В браузере абзац становится объектом HTMLParagraphElement, а как браузер хранит такие объекты, объясняет статья про DOM-дерево.
Абзацы и доступность
- Скринридеры умеют прыгать по абзацам, поэтому разбивка на
<p>помогает незрячим быстро находить нужное место. - Короткие абзацы проще читать с телефона: одна мысль помещается на экран целиком.
- Если фрагмент на другом языке, атрибут
langподскажет скринридеру правильное произношение.
Проверить разметку целиком удобно в валидаторе W3C: вставьте код во вкладку проверки текста, и он покажет и лишние </p>, и устаревшие атрибуты. Писать и сразу видеть результат удобнее в редакторе с подсветкой, варианты собраны в подборке редакторов кода для веб-разработки.
Где освоить HTML и CSS системно
Тег <p> входит в первую неделю любого курса вёрстки. Дальше идут семантическая разметка, сетки на Flexbox и Grid, адаптив под телефоны и первые проекты в портфолио.
В подборке ниже собраны курсы по HTML с ценой, длительностью и форматом обучения. Сравните программы по тому, сколько в них практики и есть ли проверка домашних заданий наставником.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| HTML и CSS с нуля Перейти на сайт курса |  Skillbox | 91 626 ₽ | 7635 ₽/мес. | 11 месяцев | Обзор курса |
| HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса |  HTML Academy | 23 400 ₽ | 3900 ₽/мес. | 2 месяца | Обзор курса |
| Основы вёрстки HTML и CSS Перейти на сайт курса |  Академия Синергия | 32 676 ₽ | 2723 ₽/мес. | 3 месяца | Обзор курса |
| HTML и CSS с нуля |  Skypro | 195 160 ₽ | 7972 ₽/мес. | 12 месяцев | Обзор курса |
| Frontend-разработчик: сайты на HTML/CSS/JavaScript Перейти на сайт курса |  Coddy | 9200 ₽ | - | 3 месяца | Обзор курса |
Больше программ — в полном каталоге курсов по HTML
