ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
HTML5. Уроки для начинающих

En Ua

HTML Параграфы



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> - это пустой тег, что означает, что у него нет конечного тега.


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

При написании поэтических произведений существует необходимость писать каждую строчку стиха с новой строки. Как же реализовать это с помощью HTML?

Если писать стих в одном параграфе, то он будет отображаться в одну строку:

Пример

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

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

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

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

Что необходимо сделать, чтобы соблюдалась стихотворная форма?

Для этого существует специальный тег.


HTML элемент <pre>

HTML элемент <pre> определяет предварительно форматированный (от анг. preformatted) текст.

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

Пример

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

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

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

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

HTML Упражнения

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

Упражнение:

Используйте корректный HTML тег, чтобы добавить параграф с текстом "Hello World!".

<html>
<body>

</body>
</html>


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

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

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

Для получения полного списка всех доступных тегов HTML, посетите наш HTML Справочник тегов на нашем сайте W3Schools на русском.


Вопросы для самоконтроля

  • Что такое HTML-параграфы?
  • Зачем нужен конечный тег?
  • Какой тег определяет разрывы строк на HTML-странице?
  • Какая проблема отображения поэзии на веб-страницах?
  • Какой тег используется для отображения поэзии в HTML-документе?