<p>: Елемент абзацу

{{HTMLSidebar}}

Елемент HTML <p> ("paragraph" – абзац) представляє абзац. Абзаци зазвичай представлені у візуальних медіа як блоки тексту, відділені від сусідніх блоків пустими рядками чи відступом першого рядка, однак абзаци HTML можуть бути будь-яким структурним групуванням пов'язаного вмісту, як то зображень чи полів форми.

Абзаци є елементами блокового рівня, отже – будуть автоматично закриті, якщо при розборі до тега </p> зустрівся інший елемент блокового рівня. Дивіться "Пропуск тега" нижче.

Спробуйте його в дії

Атрибути

Цей елемент включає лише глобальні атрибути.

Примітка: Атрибут align на тегах <p> є застарілим і не повинен використовуватися.

Приклади

HTML

<p>
  Це перший абзац тексту. Це перший абзац тексту. Це перший абзац тексту. Це
  перший абзац тексту. Це перший абзац тексту. Це перший абзац тексту.
</p>
<p>
  Це другий абзац. Це другий абзац. Це другий абзац. Це другий абзац. Це другий
  абзац. Це другий абзац.
</p>

Результат

Оформлення абзаців

Усталено браузери відділяють абзаци одним порожнім рядком. Інші способи відділення, як то відступ першого рядка, можуть бути реалізовані за допомогою CSS:

HTML

<p>
  Відділення абзаців порожніми рядками – найлегше для перегляду читачами, але
  також їх можна відділяти відступом їхніх перших рядків. Це нерідко
  використовується, щоб займати менше простору, як то для економії паперу при
  друці.
</p>

<p>
  Письмо, котре підлягає редагуванню, як то шкільні документи та ранні чернетки,
  використовують для відділення і порожні рядки, і відступи. В закінчених працях
  поєднання обох підходів вважається надлишковим і ознакою невмілості.
</p>

<p>
  У дуже старих записах абзаци відділяли особливим символом: ¶,
  <i>знаком абзацу</i>. Нині він вважається клаустрофобним і непрочитним.
</p>

<p>
  Наскільки непрочитним? Дивіться самі:
  <button data-toggle-text="О ні! Повернути як було!">
    Використовувати символ абзацу
  </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> для додавання простору між абзацами є проблемним для людей, що орієнтуються за допомогою технологій читання з екрана. Читачі з екрана можуть оголосити присутність абзацу, але не вміст всередині нього – бо такого вмісту немає. Це може заплутати й спантеличити особу, що користується читачем з екрана.

Якщо потрібен додатковий простір, слід використовувати властивості CSS, як то margin, для реалізації ефекту:

p {
  margin-bottom: 2em; /* збільшити пропуск після абзацу */
}

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• <hr>
• <br>