НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
HTML5. W3Schools українською. Повний довідник тегів

En

HTML Тег <p>


Приклад

Параграф розмічається наступним чином:

<p>Це деякий текст в параграфі.</p>
Спробуйте самі »

Більше прикладів "Спробуйте самі" далі.


Визначення та використання

Тег <p> визначає параграф (абзац).

Браузери автоматично додають один порожній рядок перед і після кожного елемента <p>.

Порада: Використовуйте CSS для стилізації параграфів.


Підтримка браузерами

Елемент
<p> Так Так Так Так Так

Глобальні атрибути

Тег <p> також підтримує Глобальні атрибути в HTML.


Атрибути подій

Тег <p> також підтримує Атрибути подій в HTML.


Більше прикладів

Приклад

Вирівняти текст в параграфі (за допомогою CSS):

<p style="text-align:right">Це деякий текст в параграфі.</p>
Спробуйте самі »

Приклад

Стилізація параграфів за допомогою CSS:

<html>
<head>
<style>
p {
  color: navy;
  text-indent: 30px;
  text-transform: uppercase;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>
Спробуйте самі »

Приклад

Докладніше про параграфи:

<p>
Цей параграф
містить багато рядків
у вихідному коді,
але браузер
ігнорує це.
</p>
Спробуйте самі »

Приклад

Проблеми з віршами в HTML:

<p>
Моя Маня лежить перед телевізором.
Моя Маня лежить перед комп’ютером.
Моя Маня цілими днями лежить на дивані...
О, поверніть мені мою Маню!..
</p>
Спробуйте самі »

Пов’язані сторінки

HTML підручник: HTML Параграфи

HTML DOM довідник: Об’єкт Paragraph


CSS налаштування за замовчуванням

Більшість браузерів будуть відображати елемент <p> з наступними значеннями за замовчуванням:

Приклад

p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
Спробуйте самі »