skip to main content

<p>

html

Кратко 🔗

Используй тег <p>, чтобы начать новый абзац.

Пример 🔗

<p>Это первый абзац текста.</p>
<p>А это уже второй.</p>
<p>И между ними небольшая пропасть.</p>

Как это понять 🔗

Тег <p> создаёт блок: всё, что находится внутри него, начнётся с новой строки. Между блоками <p> появляется вертикальный отступ, величину которого можно задать с помощью стилей.

Внутри блока может находиться любой текстовый контент.

Как пишется 🔗

<p>Текст, хихик</p>

Дефолтные стили абзаца:

CSS

p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}

Подсказки 🔗

💡 Атрибут align для тега <p> устарел и больше не используется.

💡 Если не закрыть тег </p>, то блок будет заканчиваться там, где начинается следующий блочный элемент.

В работе 🔗

Алёна,

🛠 Я часто вижу, как начинающие разработчики оборачивают словосочетания или вообще одно слово в отдельные абзацы только для переноса текста на новую строку. Так делать не нужно, поскольку абзац является логической единицей текста.

Возьмите с полки любую книгу с прозой и откройте её. Вы увидите, что чаще всего абзацы состоят из нескольких предложений. Каждый абзац визуально отделён от предыдущего и следующего. В некоторых книгах это заметный отступ. Где-то — красная строка (отступ первой строки). Редко когда абзац состоит из отдельного слова или словосочетания.

Придерживайтесь этого принципа и в вёрстке. Оборачивайте в тег p как минимум одно полное предложение или текст из нескольких предложений.

Если нужен текстовый тег для слова или словосочетания — обратите внимание на <span>.

Текст — пластичная конструкция. Если нужно добиться переноса строк, то ограничьте ширину текстового блока и позвольте тексту занять отведённое ему пространство естественным образом.

Владимир 👨‍🔧

🛠 Тег <p> по факту ведёт себя как обычный блок <div>. Нужно учесть, что у <p> предустановлено свойства margin-bottom и margin-top — отступы снизу и сверху, чтобы каждый абзац отступал по умолчанию на 1em (примерно 16 пикселей) от предыдущего. Поэтому этот показатель отступов надо прописывать в CSS для всех тегов <p>.

Чтобы сделать заголовок, который не имеет ценности для поисковых машин, то лучше, вместо одного из тегов <h1>...<h6> использовать тег <p> с классом h1 или h2 и так далее.


Автор: Владимир 👨‍🔧