HTML-тег <p>
HTML-тег <p> является блочным элементом, который используется для определения абзаца текста на веб-странице. Он создает новую строку до и после элемента, занимая всю ширину его родительского контейнера.
Этот семантический тег обычно используется для структурирования текстового контента на веб-странице, например, статей, записей в блоге или описаний товаров. Вы можете добавлять другие HTML-теги, такие как <strong> или <em>, внутри тега <p>, чтобы выделить или форматировать определенные слова или фразы в абзаце.
Правильная структуризация текстового контента с помощью тега <p> важна, так как это может помочь улучшить доступность и удобство использования вашей веб-страницы. Экранные дикторы и другие вспомогательные технологии полагаются на семантические теги, такие как <p>, чтобы точно интерпретировать и представлять контент пользователям.
Синтаксис
Тег <p> используется парами. Содержимое записывается между открывающим (<p>) и закрывающим (</p>) тегами. Если закрывающий тег опущен, считается, что конец абзаца совпадает с началом следующего блочного элемента.
TIP
Пробелы между открывающим тегом <p> и его содержимым игнорируются браузером. Чтобы задать отступ, используйте свойство CSS text-indent.
DANGER
Тег <p> не может содержать таблицы и другие блочные элементы.
Пример использования HTML-тега <p>:
Пример использования HTML-тега <p>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Результат
Использование CSS
Для выравнивания текста в абзаце вместо устаревшего атрибута align используйте свойство CSS text-align.
Пример использования HTML-тега <p> со свойством 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>Пример использования HTML-тега <p> с тегом <br>:
Пример использования HTML-тега <p> с HTML-тегом <br>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p> Inside the paragraph, we can put the tag <br />, <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>Атрибуты
| Атрибут | Значение | Описание |
|---|---|---|
| align | right left justify | Определяет выравнивание текста. Не поддерживается в HTML5 |
Тег <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>?