This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<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
<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; // увеличение пустого пространства после абзаца}Спецификации
| Specification |
|---|
| HTML # the-p-element |