Абзацы определяются с помощью тега <p>
. Тег <p>
понадобится вам для публикации текста на веб-страницах. Вот пример:
<p>Это абзац.</p>
<p>Это еще один абзац.</p>
Встроенные в браузеры таблицы стилей автоматически создают некоторое пространство над и под содержимым абзаца (называемое margin), но вы можете переопределить его с помощью CSS-свойства margin
.
Нужен ли закрывающий тег <p>
В HTML 4 и более ранних версиях было достаточно инициировать новый абзац, используя открывающий тег. Большинство браузеров будут правильно отображать HTML, даже если вы забудете конечный тег. Например:
<p>Это абзац.
<p>Это еще один абзац.
HTML-код в приведенном выше примере будет работать в большинстве веб-браузеров, но не полагайтесь на него. Забывание конечного тега может привести к неожиданным результатам или ошибкам.
В целях прямой совместимости и хорошей практики кодирования рекомендуется использовать открывающий и закрывающий теги для абзацев.
Использование тега <br>
Тег <br>
используется для вставки разрыва строки на веб-странице.
Поскольку <br>
— это пустой элемент, нет необходимости в закрывающем теге </br>
.
<p>Это абзац <br> с разрывом строки.</p>
<p>Это <br>другой абзац <br> с разрывом строки.</p>
Не используйте пустой абзац, т.е. <p> </p>
, чтобы добавить дополнительное место на странице. Браузер может игнорировать пустые абзацы, так как это логический тег. Вместо этого используйте CSS-свойство margin
, чтобы настроить пространство вокруг элементов.
Использование тега <hr>
Для визуального разделения разделов контента на веб-странице можно использовать тег <hr>
, который создает горизонтальную линию. Как и <br>
, тег <hr>
является пустым элементом. Вот пример:
<p>Это абзац.</p>
<hr>
<p>Это еще один абзац.</p>
Использование неразрывного пробела
Обычно браузер отображает несколько пробелов, созданных внутри кода HTML, нажимая клавишу пробела или клавишу табуляции на клавиатуре как один пробел. Несколько разрывов строк, созданных внутри кода HTML путем нажатия клавиши ввода, также отображаются в виде одного пробела.
Следующие абзацы будут отображаться в одной строке без лишних пробелов:
<p>This paragraph contains multiple spaces in the source code.</p>
<p>
This paragraph
contains multiple tabs and line breaks
in the source code.
</p>
Используйте
для создания дополнительных последовательных пробелов, а тег <br>
для создания разрывов строк на ваших веб-страницах, как показано в следующем примере:
<p>Этот абзац имеет несколько пробелов.</p>
<p>Этот абзац имеет несколько<br><br>разрывов<br><br><br>строк.</p>
Использование тега <pre>
Иногда использование
, <br>
и т. д. для управления пространством не очень удобно. Для отображения пробелов, табуляции, разрывов строк и т. д. в точности так, как написано в HTML-коде вы можете использовать тег <pre>
. Это очень полезно для представления текста, где важны пробелы и разрывы строк, например для стихов или кода.
В следующем примере текст будет отображаться в браузере так же, как и в исходном коде:
<pre>
Twinkle, twinkle, little star,
How I wonder what you are!
Up above the world so high,
Like a diamond in the sky.
</pre>
Текст в элементе <pre>
обычно отображается браузерами моноширинным шрифтом, например, Courier, но вы можете переопределить это, используя CSS-свойство font
.