Параграфы в HTML
Параграфы в HTML — элемент разметки для оформления самостоятельных текстовых абзацев на веб-странице. Параграф создаётся тегом <p> и обычно используется для основного текста: описаний, вступлений, пояснений, комментариев, фрагментов статей и других логически завершённых частей контента.[1]
HTML-параграф важен не только для внешнего вида страницы. Он помогает разделять текст на смысловые блоки, упрощает чтение, делает структуру документа понятнее для браузеров, поисковых систем, программ чтения с экрана и других инструментов, которые анализируют HTML-разметку.
Основной синтаксис
Параграф записывается с открывающим и закрывающим тегами:
<p>Это отдельный абзац текста.</p>
Если на странице нужно разместить несколько абзацев, каждый из них оформляется отдельным элементом <p>:
<p>Первый абзац текста.</p>
<p>Второй абзац текста.</p>
<p>Третий абзац текста.</p>
Браузеры по умолчанию добавляют внешние отступы до и после параграфа. Конкретный вид зависит от стандартных стилей браузера и CSS-правил сайта.
Переносы строк и пробелы
В HTML несколько пробелов и переносов строк внутри обычного текста сворачиваются в один пробел. Поэтому перенос строки в исходном коде не всегда означает перенос строки на странице:
<p>
Этот текст написан
на нескольких строках
в исходном коде.
</p>
На странице такой фрагмент будет отображаться как один обычный абзац. Если внутри текста нужен принудительный перенос строки, используется тег <br>, но для разделения самостоятельных мыслей лучше создавать отдельные параграфы.
Атрибуты
Элемент <p> поддерживает глобальные атрибуты HTML: class, id, style, title, lang и другие.[2] На практике чаще всего используются классы и идентификаторы, чтобы связать абзац со стилями CSS или логикой JavaScript.
<p class="lead">Вводный абзац статьи.</p>
<p id="note">Короткое примечание к тексту.</p>
Использовать встроенный атрибут style можно, но в большинстве случаев удобнее выносить оформление в CSS. Так разметка остаётся чище, а внешний вид страницы легче поддерживать.
Вложенные элементы
Внутри параграфа можно использовать строчные элементы: ссылки, выделения, изображения, фрагменты кода и другие элементы, которые не разрывают поток текста.
<p>
Это абзац со <a href="#">ссылкой</a>,
<strong>важным фрагментом</strong> и <em>акцентом</em>.
</p>
Блочные элементы, например <div>, <section>, <ul>, <ol>, <h1>—<h6>, не следует помещать внутрь <p>. Когда браузер встречает такой элемент, он может автоматически закрыть параграф раньше, чем это ожидалось, из-за чего структура документа станет неочевидной.
Параграфы и CSS
Внешний вид параграфов обычно настраивают через CSS: задают межстрочный интервал, ширину текстового блока, отступы, цвет, размер шрифта и оформление отдельных классов.
p {
line-height: 1.6;
margin: 0 0 16px;
}
Для длинных текстов особенно важны ширина строки и межстрочный интервал. Слишком широкая строка затрудняет чтение, а слишком маленький интервал делает текст визуально плотным.
Практический пример
Ниже показан простой фрагмент страницы с несколькими параграфами, вводным абзацем и примечанием.
Типичные ошибки
- Использовать пустые параграфы только ради отступов. Для отступов лучше применять CSS.
- Помещать внутрь параграфа крупные блочные элементы: списки, таблицы, разделы или заголовки.
- Разбивать каждый короткий фрагмент текста тегом
<br>вместо нормальных абзацев. - Заменять семантическую разметку визуальным оформлением через пробелы и переносы строк.
См. также
Другие статьи про HTML
| Основы |  | |
|---|---|---|
| Расширенные темы | ||
