HTML Параграфы

Параграф всегда начинается с новой строки и, как правило, является отдельным фрагментом текста.

Параграфы в HTML

В HTML для обозначения параграфа применяется тег <p>.

Каждый параграф начинается на новой строке, а браузеры автоматически добавляют небольшое пространство над и под ним.

Пример:

<p>Это параграф.</p>
<p>Это еще один параграф.</p>

Отображение HTML-кода

Невозможно предсказать точный вид кода на HTML со стопроцентной достоверностью.

Разный результат может быть получен в зависимости от размера экрана (большой или маленький), а также при изменении размера окна браузера.

В HTML невозможно повлиять на окончательный результат, добавляя лишние пробелы или переходы на новую строку непосредственно в сам HTML-код.

При отображении страницы браузеры автоматически удаляют все избыточные пробелы и переносы:

Пример:

<p>
Этот параграф
в исходном коде
расположен по нескольким строкам,
но браузер это проигнорирует.
</p>

<p>
Этот    параграф
в исходнике
содержит    большое количество пробелов,
но браузер их не учтет.
</p>

Горизонтальные разделители в HTML

Элемент <hr> создает тематическое разделение на странице и обычно отображается в виде горизонтальной линии.

Этот элемент используется для структурирования содержимого HTML-страницы:

Пример:

<h1>Это заголовок первого уровня</h1>
<p>Это некоторый текст.</p>
<hr>
<h2>Это заголовок второго уровня</h2>
<p>Это другой текст.</p>
<hr>

Элемент <hr> – это пустой элемент, у него нет закрывающего тега.

Переносы строк в HTML

Элемент HTML <br> предназначен для создания переноса строки.

Используйте тег <br>, если вам нужен перенос строки (новая строка) без начала нового параграфа:

Пример:

<p>Это параграф<br>с переносом строки.<br>Еще одна строка.</p>

Элемент <br> – это пустой элемент, у него нет закрывающего тега.

Проблема с поэзией

Этот стишок будет показан в одну строку:

Пример:

<p>
Ветер шепчет за окном,
Звёзды светят в тишине.
Сны рисуют за углом,
Там, где утро на заре.
</p>

Решение – использование HTML-элемента <pre>

Элемент HTML <pre> определяет текст с предварительным форматированием.

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

Пример:

<pre>
Ветер шепчет за окном,
Звёзды светят в тишине.
Сны рисуют за углом,
Там, где утро на заре.
</pre>