#5 Заголовки и абзацы: h1–h6, p, br, hr - HTML c нуля

Скелет документа и служебная информация разобраны — переходим к содержимому, то есть к тому, что находится в <body> (см. урок #3). Самые частые элементы любой страницы — заголовки и абзацы: вы уже встречали их в примерах, теперь разберём подробно.

Заголовки: h1–h6

HTML предлагает шесть уровней заголовков: от <h1> (самый важный и крупный) до <h6> (самый мелкий):

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Уровень выбирают по смыслу, а не по размеру шрифта: <h1> — название всей страницы (такой заголовок должен быть один), <h2> — крупные разделы, <h3> — их подразделы и так далее. Размер и цвет потом можно будет поменять через CSS, поэтому выбирайте уровень только по значимости текста.

Абзацы: p

Текст разбивают на абзацы парным тегом <p>:

<p>Это первый абзац текста.</p>
<p>Это второй абзац.</p>

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

<p>Этот текст написан
в две строки,
но браузер склеит его в одну</p>

Перенос строки: br

Если внутри абзаца всё же нужна новая строка, ставят одиночный тег <br> (мы уже видели его в уроке #2 среди одиночных тегов):

<p>Первая строка<br>Вторая строка</p>

Типичные случаи — стихи и адреса. Не заменяйте <br> абзацы: для разделения текста на смысловые куски предназначен <p>.

Разделитель: hr

Одиночный тег <hr> (horizontal rule — горизонтальная линия) по смыслу отделяет одну тему от другой, например части статьи:

<p>Первая часть текста</p>
<hr>
<p>Вторая часть текста</p>

Практика

Создайте страницу-статью: заголовок <h1> с названием, два раздела с заголовками <h2>, в каждом — 2–3 абзаца <p>; между разделами вставьте <hr>, а в конец — четверостишие, где строки разделены <br>.