TGViewer
<divelopers> <divelopers> @alexnozer_dev · 1.18K subscribers
Post #11 183
Элемент <p>

Согласно спеке <p> - это контейнер для фразового контента, который образует тематический блок текста из одного или нескольких предложений. К фразовому контенту относится текст, элементы семантики текста (<i>, <strong>, <cite>, тд.), аудио, видео, картинки, лейблы и контролы.

Несколько кейсов, где можно использовать <p>:

Кейс 1: классические абзацы.

Набор следующих друг за другом <p> с предложениями внутри. Могут идти вперемешку с <figure>, <blockquote>, <ul>, <ol>, <dl> и т.д. Тем самым формируется структура контента статьи, блогпоста, лонгрида.

Кейс 2: короткие тематические фразы.

Географический адрес, слоган, краткое описание в карточке товара, ошибка под полем ввода, цитата в <blockquote>. В общем заворачиваем в <p> какую-то фразу, может даже из одного слова.

Кейс 3: лейбл и поле

Можно использовать <p> для группировки лейбла и инпута, или любого другого контрола. Это разрешено спецификацией и абсолютно валидно. Сам так очень редко делаю, но встречаю иногда такой вариант использования.

Кейс 4: подзаголовок рядом с заголовком

В этом случае <p> содержит текст подзаголовка, а сам следует сразу после <h*> и вместе с ним располагается внутри <hgroup>, <header> или <div>. Опять же, текст подзаголовка может содержать одно слово.

***

Но вообще надо исходить из вопроса:
это сделает удобнее для пользователей?


Скринридеры не зачитывают <p> особым образом, для них это как <div> с текстом. Поисковые краулеры, вероятно, лучше распознают тексты, размеченные при помощи <p>. По умолчанию у <p> есть отступы. Если сломается CSS, страницу решат распечатать, посмотреть в режиме чтения, то <p> будет лучше отображаться и разрядит текст отступами. Если текст с <p> редактируется в WYSIWYG-редакторе, они лучше парсят и отображают контент с <p>. В остальном какой-то другой пользы или вреда от <p> и длины контента в нем для пользователя нет.
  • 👍 4
More from @alexnozer_dev
  1. Sep 30, 2026Управление маркерами CSS-каруселей После релиза CSS-каруселей в Chrome 135 перед Google I/…
  2. Sep 28, 2026You don’t know HTML: SGML, HTML, XML, XHTML За свою историю язык разметки гипертекста HTML…
  3. Sep 23, 2026Images Preview На некоторых сайтах, где надо показывать изображения в высоком качестве, дл…
  4. Sep 21, 2026Реализация пользовательских атрибутов Под конец прошлого года я рассказывал об API пользов…
  5. Sep 14, 2026Подклассы Event вместо CustomEvent Многие библиотеки предоставляют систему событий в качес…
  6. Sep 11, 2026Эволюция стилей в темах Shopify Адам Ватан на днях поделился новостью, что Shopify выкупил…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →