Spec-Zone.ru › HTML

<p> Элемент HTML для абзаца

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и в разных версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

  • Подробнее
  • Полная информация о совместимости
  • Отправить отзыв
>

Элемент <p> HTML представляет собой абзац. В визуальных материалах абзацы обычно отображаются как блоки текста, отделённые от соседних блоков пустыми строками и/или отступом в первой строке, но абзацами в 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 #999999;
}

Атрибуты

Этот элемент включает только глобальные атрибуты.

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

Доступность

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

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

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

p {
  margin-bottom: 2em; /* increase white space after a paragraph */
}

Примеры

>

HTML

<p>
  This is the first paragraph of text. This is the first paragraph of text. This
  is the first paragraph of text. This is the first paragraph of text.
</p>
<p>
  This is the second paragraph. This is the second paragraph. This is the second
  paragraph. This is the second paragraph.
</p>

Результат

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

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

HTML

<p>
  Separating paragraphs with blank lines is easiest for readers to scan, but
  they can also be separated by indenting their first lines. This is often used
  to take up less space, such as to save paper in print.
</p>

<p>
  Writing that is intended to be edited, such as school papers and rough drafts,
  uses both blank lines and indentation for separation. In finished works,
  combining both is considered redundant and amateurish.
</p>

<p>
  In very old writing, paragraphs were separated with a special character: ¶,
  the <i>pilcrow</i>. Nowadays, this is considered claustrophobic and hard to
  read.
</p>

<p>
  How hard to read? See for yourself:
  <button data-toggle-text="Oh no! Switch back!">
    Use pilcrow for paragraphs
  </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", (event) => {
  document.querySelectorAll("p").forEach((paragraph) => {
    paragraph.classList.toggle("pilcrow");
  });

  [event.target.innerText, event.target.dataset.toggleText] = [
    event.target.dataset.toggleText,
    event.target.innerText,
  ];
});

Результат

Техническая сводка

Категории содержимого Потоковое содержимое, ощутимое содержимое.
Допустимое содержимое Фразовое содержимое.
Пропуск тегов Начальный тег обязателен. Конечный тег можно опустить, если сразу за элементом <p> следует элемент <address>, <article>, <aside>, <blockquote>, <details>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, h1, h2, h3, h4, h5, h6, <header>, <hgroup>, <hr>, <main>, <menu>, <nav>, <ol>, <pre>, <search>, <section>, <table>, <ul> или другой элемент <p> либо если в родительском элементе больше нет содержимого, а сам родительский элемент не является элементом <a>, <audio>, <del>, <ins>, <map>, <noscript> или <video> либо автономным пользовательским элементом.
Допустимые родительские элементы Любой элемент, допускающий потоковое содержимое.
Неявная роль ARIA абзац
Допустимые роли ARIA Любая
Интерфейс DOM HTMLParagraphElement

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

Спецификация
HTML>
# the-p-element>

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

Настольные компьютеры Мобильные устройства
Chrome Edge Firefox Opera Safari Chrome Android Firefox для Android Opera Android Safari на iOS Samsung Internet WebView Android WebView на iOS
p 1 12 1 15 1 18 4 14 1 1.0 4.4 1

См. также

  • <hr>
  • <br>

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/p

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API