<p>: Элемент текстового абзаца
HTML-элемент <p>
представляет собой абзац. Абзацы обычно представлены в визуальной среде в виде блоков текста, отделенных от соседних блоков пустыми строками и/или отступом в первой строке, кроме этого HTML-абзацы могут представлять собой структурную группировку однотипного содержимого, например изображений или полей формы.
Абзацы являются блочными элементами и, в частности, автоматически закрываются, если другой блочный элемент находится перед закрывающим тегом </p>
. Смотрите ниже "Пропуск тега".
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Категории контента | Потоковый контент, явный контент. |
---|---|
Разрешенное содержимое | Фразовый контент. |
Пропуск тега | Требуется открывающий тег. Закрывающий тег может быть пропущен, если за элементом <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
<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