<p>: Элемент текстового абзаца

HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделённых от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.

Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>. Смотрите ниже "Пропуск тега".

Категории контента Потоковый контент, явный контент.
Разрешённое содержимое Фразовый контент.
Пропуск тега Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом <p> сразу следует элемент <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1> (en-US), <h2> (en-US), <h3> (en-US), <h4> (en-US), <h5> (en-US), <h6> (en-US), <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table> (en-US), <ul> или другой элемент <p>, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом <a>.
Разрешённые родительские элементы Любой элемент, который разрешает потоковый контент в качестве содержимого.
Разрешённые роли ARIA Любые
DOM-интерфейс HTMLParagraphElement (en-US)

Атрибуты

К этому элементу применимы только глобальные атрибуты.

Примечание: Атрибут align в тегах <p> устарел и больше не должен с использоваться.

Пример

HTML

<p>Это первый абзац текста.
  Это первый абзац текста.
  Это первый абзац текста.
  Это первый абзац текста.</p>
<p>Это второй абзац текста.
  Это второй абзац текста.
  Это второй абзац текста.
  Это второй абзац текста.</p>

Результат

Стилизация абзацев

По умолчанию браузеры разделяют абзацы одной пустой строкой. Альтернативные методы разделения, такие как отступы в первой строке абзаца, могут быть достигнуты с помощью CSS:

HTML

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

<p>Письмо (имеется ввиду письменность), предназначенное для редактирования,
например, школьные записи и черновики, использует для разделения
как пустые строки, так и отступы. В готовых работах объединение этих двух способов
считается излишним и любительским.</p>

<p>В очень старом письме абзацы были разделены
специальным символом: ¶, <i>pilcrow</i> (знак абзаца).
В настоящее время это считается замкнутым и трудно читаемым.</p>

<p>Насколько трудно читать? Посмотрите сами:
  <button data-toggle-text="О нет! Переключи обратно!">Используем "pilcrow" для абзацев</button>
</p>

CSS

p {
  margin: 0;
  text-indent: 3ch;
}

p.pilcrow {
   text-indent: 0;
   display: inline;
}
p.pilcrow + p.pilcrow::before {
  content: " ¶ ";
}

JavaScript

document.querySelector('button').addEventListener('click', function (event) {
  document.querySelectorAll('p').forEach(function (paragraph) {
    paragraph.classList.toggle('pilcrow');
  });
  var newButtonText = event.target.dataset.toggleText;
  var oldText = event.target.innerText;
  event.target.innerText = newButtonText;
  event.target.dataset.toggleText = oldText;
});

Результат

Проблемы доступности

Разделение контента на абзацы помогает сделать страницу более доступной. Программы чтения с экрана и другие вспомогательные технологии предоставляют шорткаты ("shortcut" - кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.

Использование пустого элемента <p> для добавления пустого пространства между абзацами является проблемой для людей, которые используют технологию чтения с экрана.

Если требуется дополнительное пространство, используйте свойства CSS, например margin, чтобы создать такой эффект:

p {
  margin-bottom: 2em; // увеличение пустого пространства после абзаца
}

Спецификации

Спецификация Статус Комментарий
HTML Living Standard
Определение '<p>' в этой спецификации.
Живой стандарт Нет изменений с последнего "snapshot" (снапшот или снимок - состояние сохранённое в определённый момент времени) HTML5
HTML5
Определение '<p>' в этой спецификации.
Рекомендация Атрибут align больше не поддерживается
HTML 4.01 Specification
Определение '<p>' в этой спецификации.
Рекомендация Первоначальное определение

Поддержка браузерами

BCD tables only load in the browser

Смотрите также