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

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

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

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

Атрибути

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

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

Доступність

Розрив вмісту на абзаци допомагає зробити сторінку доступнішою. Читачі з екрана та інші допоміжні технології пропонують своїм користувачам зручні інструменти для переходу до наступного чи попереднього абзацу, даючи їм змогу гортати вміст так, як завдяки пропускам можуть стрибати по вмісту візуальні користувачі.

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

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

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

Приклади

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,
  ];
});

Результат

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

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

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

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

• <hr>
• <br>