HTML. Параграфы (абзацы)

Курс по основам HTML. W3Schools на русском языке. Уроки для начинающих

Параграфы в HTML. Как сделать параграфы на веб-страницах?

HTML элемент <p> определяет параграф (абзац):

Примечание: Слово paragraph обычно переводится, как абзац. Но в среде веб-разработчиков чаще используют слово параграф, т.е. отступ текста с новой строки. Здесь и далее будет использоваться именно слово параграф.

Пример:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Попробуйте сами »

Примечание: Браузеры автоматически добавляют пробел (margin) до и после параграфа.

Отображение HTML

Вы не можете знать наверняка, где именно будет отображаться ваша веб-страница, на каких дисплеях или устройствах. Большие или маленькие экраны и размеры окон показывают разные результаты. С помощью HTML-кода вы не можете изменить исходное отображение, добавляя дополнительные пробелы или дополнительные строки в вашем HTML-коде. Во время отображения страницы веб-браузер удаляет любые дополнительные пробелы и дополнительные строки:

Пример:

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
Попробуйте сами »

Не забывайте про конечный тег

Большинство браузеров будет отображать HTML правильно, даже если вы забудете конечный тег:

Пример:

<p>This is a paragraph.
<p>This is another paragraph.
Попробуйте сами »

Пример выше будет работать в большинстве браузеров, но не надейтесь на это.

Примечание: Удаление конечного тега может привести до неожиданных результатов или ошибок в отображении веб-страницы.

Разрывы HTML-строк

HTML элемент <br> определяет разрыв строки. Используйте функцию <br>, если необходимо прервать строку (создать новую строку), не начиная новый параграф:

Пример:

<p>This is<br>a paragraph<br>with line breaks.</p>
Попробуйте сами »

Тег <br> - это пустой тег, что означает, что он не имеет конечного тега.

Проблема отображения поэзии

Этот стих будет отображаться в одну строку:

Пример:

<p>
  Зродились ми великої години,

  З пожеж війни і з полум'я вогнів,

  Плекав нас біль по втраті України,

  Кормив нас гнів і злість на ворогів.
</p>
Попробуйте сами »

HTML элемент <pre>

HTML элемент <pre> определяет предварительно отформатированный текст. Текст внутри элемента <pre> отображается шрифтом фиксированной ширини (обычно Courier), и он сохраняет пробелы и разрывы строк так, как написано:

Пример:

<pre>
  І ось ідем у бою життєвому

  Міцні, тверді, незломні мов граніт,

  Бо плач не дав свободи ще нікому,

  А хто борець, той здобуває світ.
</pre>
Попробуйте сами »

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 »

Справочник HTML тегов

Справочник HTML тегов W3Schools содержит дополнительную информацию про HTML элементы и их атрибуты.

Тег Описание
<p> Определяет параграф (абзац)
<br> Вставляет один разрыв строки
<pre> Определяет предварительно отформатированный текст