Абзацы HTML
Элемент <p> определяет абзац, обычно являющийся блоком текста. Абзац всегда начинается с новой строки, а браузеры добавляют немного отступа (margin) до и после него.
Пример
Два абзаца.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Два Абзаца</title>
</head>
<body>
<p>Это абзац.</p>
<p>Это другой абзац.</p>
</body>
</html>
Отображение HTML
Нельзя быть точно уверенным, как именно будет выглядеть HTML. Разные размеры экрана и изменение размера окна дают разные результаты. Также нельзя изменить отображение, добавляя лишние пробелы или лишние строки в коде; браузер удаляет все лишние пробелы и строки при отображении страницы.
Пример
Лишние пробелы и переносы строк в исходном коде схлопываются браузером.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отображение пробелов</title>
</head>
<body>
<p>
Этот абзац
содержит много строк
в исходном коде,
но браузер
их игнорирует.
</p>
<p>
Этот абзац
содержит много пробелов
в исходном коде,
но браузер
их игнорирует.
</p>
</body>
</html>
Горизонтальные линии HTML
Тег <hr> определяет тематический разрыв на странице, обычно отображаемый как горизонтальная линия. Используется для разделения содержимого или обозначения изменения. <hr> — пустой тег без закрывающего тега.
Пример
Горизонтальные линии, разделяющие разделы содержимого.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Горизонтальная линия</title>
</head>
<body>
<h1>Это заголовок 1</h1>
<p>Это некоторый текст.</p>
<hr>
<h2>Это заголовок 2</h2>
<p>Это другой текст.</p>
<hr>
</body>
</html>
Переносы строк HTML
Элемент <br> создаёт перенос строки. Используйте его, когда нужна новая строка без начала нового абзаца. <br> — пустой тег без закрывающего тега.
Пример
Абзац с переносами строк, созданными с помощью <br>.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Разрывы строк</title>
</head>
<body>
<p>Это<br>абзац<br>с разрывами строк.</p>
</body>
</html>
Проблема со стихотворением
Текст, зависящий от переносов строк и интервалов, например стихотворение, не сохраняет свою форму в обычном абзаце. Браузер сжимает его в одну строку.
Пример
Стихотворение в абзаце, показанное всё в одну строку.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проблема со стихотворением</title>
</head>
<body>
<p>
Моя Бонни лежит за океаном.
Моя Бонни лежит за морем.
Моя Бонни лежит за океаном.
О, верните мне мою Бонни.
</p>
</body>
</html>
Решение - элемент HTML <pre>
Элемент <pre> определяет предварительно отформатированный текст. Текст внутри него отображается моноширинным шрифтом (обычно Courier) и сохраняет как пробелы, так и переносы строк, поэтому стихотворение отображается правильно.
Пример
Стихотворение внутри элемента <pre>, сохраняющее переносы строк.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Стихотворение в Pre</title>
</head>
<body>
<pre>
Моя Бонни лежит за океаном.
Моя Бонни лежит за морем.
Моя Бонни лежит за
океаном.
О, верните мне мою Бонни.
</pre>
</body>
</html>