<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


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

### Результат

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

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

### HTML


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

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

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

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

### CSS


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

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

### JavaScript


```js
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`, чтобы создать такой эффект:


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

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

| Specification |
| --- |
| HTML Standard # the-p-element |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* `<hr>`
* `<br>`