: Элемент текстового абзаца - HTML | MDN

Toggle sidebar

Theme

OS default
Light
Dark

Русский

Remember language Learn more

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

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

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

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

<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 в тегах устарел и больше не должен с использоваться.

Пример

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" - кратчайший путь), позволяющие пользователям переходить к следующему или предыдущему абзацу, позволяя им просматривать содержимое, например, как пустая строка позволяет пользователям, воспринимающим информацию визуально, пропускать абзацы.

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

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

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

<hr>

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 15 апр. 2025 г. by MDN contributors.

View this page on GitHub • Report a problem with this content

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

In this article

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

Атрибуты

Пример

HTML

Результат

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

HTML

CSS

JavaScript

Результат

Доступность

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

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

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

Help improve MDN