1. Веб-технологии для разработчиков
  2. HTML
  3. Справка по HTML
  4. Элемент
  5. <p>

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..

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

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

Интерактивный пример

<p>
 Geckos are a group of usually small, usually nocturnal lizards. They are found
 on every continent except Antarctica.
</p>
<p>
 Some species live in houses where they hunt insects attracted by artificial
 light.
</p>
p {
 margin: 10px 0;
 padding: 5px;
 border: 1px solid #999;
}
Категории контента Потоковый контент, явный контент.
Допустимое содержимое Фразовый контент.
Пропуск тегов Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом <p> сразу следует элемент <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> или другой элемент <p>, или если в родительском элементе больше ничего не содержится и родительский элемент не является элементом <a>.
Допустимые родители Любой элемент, который разрешает потоковый контент в качестве содержимого.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLParagraphElement

Атрибуты

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

Примечание: Атрибут 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
# the-p-element

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

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

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

AltStyle によって変換されたページ (->オリジナル) /