etxt banner 468x60etxt banner 728x90etxt banner 930x180kwork banner 468x60kwork banner 728x90kwork banner 930x180skillbox banner 468x60skillbox banner 728x90skillbox banner 930x180

Руководство по параграфам в HTML

Абзацы определяются с помощью тега <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>

Использование неразрывного пробела &nbsp;

Обычно браузер отображает несколько пробелов, созданных внутри кода 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>

Используйте &nbsp; для создания дополнительных последовательных пробелов, а тег <br> для создания разрывов строк на ваших веб-страницах, как показано в следующем примере:

<p>Этот абзац имеет несколько&nbsp;&nbsp;&nbsp;пробелов.</p>
<p>Этот абзац имеет несколько<br><br>разрывов<br><br><br>строк.</p>

Использование тега <pre>

Иногда использование &nbsp;, <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.

smsc banner 480x320smsc banner 728x90smsc banner 120x600skillbox banner 480x320skillbox banner 728x90skillbox banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…
Подробнее

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…
Подробнее

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…
Подробнее