W3docs
ru
Войти

HTML <p> тег

Тег <p> определяет абзац текста. Описание тега, атрибуты и примеры использования.

HTML-тег <p> — это блочный элемент, который определяет абзац текста на веб-странице. Как блочный элемент, он начинается с новой строки и занимает всю ширину родительского контейнера.

На этой странице рассмотрено, как писать абзацы, какие отступы браузеры применяют к ним по умолчанию, когда не следует использовать <p>, а также как стилизовать абзацы с помощью CSS.

Этот семантический тег широко используется для структурирования текстового контента: статей, публикаций в блогах или описаний товаров. Внутрь <p> можно помещать строчные теги, такие как <strong> или <em>, чтобы выделить или отформатировать отдельные слова или фразы внутри абзаца.

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

Синтаксис

Тег <p> используется парно. Содержимое записывается между открывающим (<p>) и закрывающим (</p>) тегами. Если закрывающий тег опущен, считается, что конец абзаца совпадает с началом следующего блочного элемента.

Совет

Пробелы между открывающим тегом <p> и его содержимым игнорируются браузером. Чтобы задать отступ, используйте CSS-свойство text-indent .

Опасно

Тег <p> не может содержать таблицы и другие блочные элементы.

Пример использования HTML-тега <p>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>
</html>
Попробуйте сами »

Отступы абзацев по умолчанию (блочная модель)

Браузеры не отображают абзацы вплотную друг к другу. По умолчанию они применяют верхний и нижний margin около 1em к каждому элементу <p>, что и создаёт видимый зазор между абзацами. Стандартный стиль браузера выглядит примерно так:

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        margin-top: 0;
        margin-bottom: 0.5rem;
      }
    </style>
  </head>
  <body>
    <p>This paragraph has a smaller gap below it.</p>
    <p>And this one sits closer to the paragraph above.</p>
  </body>
</html>
Совет

Распространённый сброс — margin: 0 для p, а затем добавление отступа обратно только с помощью margin-bottom. Это предотвращает смещение контейнера вниз из-за нежелательного верхнего margin первого абзаца.

Когда НЕ следует использовать <p>

Элемент <p> может содержать только фразовый контент — текст и строчные элементы, такие как <strong>, <em>, <a>, <span> или <img>. Он не может содержать блочные элементы.

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

  • <div> (используйте тег <div> как обёртку вокруг абзацев, а не наоборот)
  • Списки: <ul>, <ol>, <li>
  • Заголовки (<h1>–<h6>)
  • Таблицы (<table>)
  • Другой <p> (абзацы не могут быть вложенными)
<!-- WRONG: the <p> is auto-closed before the <div>,
     so the second sentence ends up outside the paragraph -->
<p>
  First sentence.
  <div>Block content</div>
  Second sentence.
</p>

Чтобы сгруппировать блочный контент, оберните абзацы в <div>, а не наоборот. Для группировки строчного контента используйте тег <span>.

Использование CSS

Для выравнивания текста в абзаце вместо устаревшего атрибута align используйте CSS-свойство text-align.

Пример использования HTML-тега <p> с CSS-свойством text-align:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .paragraph {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Title of the document</h1>
    <div class="paragraph">
      <p>The text alignment to the center is set with CSS property text-align</p>
    </div>
  </body>
</html>
Попробуйте сами »

Переносы строк внутри абзаца

Чтобы перенести строку внутри абзаца, не начиная нового, используйте тег <br>. В отличие от нового <p>, тег <br> не добавляет стандартный отступ абзаца — он лишь переносит последующий текст на следующую строку.

Пример использования HTML-тега <p> вместе с тегом <br>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p> Inside the paragraph, we can put the tag &lt;br /&gt;, <br /> to transfer a part of the text to another line if necessary.</p>
    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. <br /> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
  </body>
</html>
Попробуйте сами »

Атрибуты

АтрибутЗначениеОписание
alignleft, right, center, justifyОпределяет выравнивание текста. Устаревший атрибут — не поддерживается в HTML5; вместо него используйте CSS-свойство text-align

Тег <p> также поддерживает Глобальные атрибуты и Атрибуты событий.

Как стилизовать HTML-тег <p>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        color: blue;
        font-size: 18px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <p>This paragraph is styled with CSS.</p>
  </body>
</html>

Практика

Практика
Какова цель HTML-тега p?
Какова цель HTML-тега p?
Was this page helpful?