Заголовки и абзацы

Большая часть любой страницы — текст. HTML делит его на заголовки и абзацы. Важно помнить: теги описывают смысл текста, а не внешний вид. Тег говорит «это заголовок раздела», а каким шрифтом его рисовать, решает CSS.

Заголовки

Есть шесть уровней заголовков — от <h1> до <h6> (h — heading, заголовок). Чем больше число, тем ниже уровень и мельче шрифт:

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

Уровни <h5> и <h6> встречаются редко: настолько глубокая структура обычно не нужна.

Структура страницы

Заголовки образуют оглавление страницы, как в книге. <h1> — название всей страницы, <h2> — её разделы, <h3> — подразделы внутри раздела:

<h1>Рецепты</h1>
<h2>Супы</h2>
<h3>Борщ</h3>
<h3>Гаспачо</h3>
<h2>Десерты</h2>
<h3>Шарлотка</h3>

На странице обычно один <h1>. Уровни не пропускают: после <h2> идёт <h3>, а не <h4>.

Абзацы

Тег <p> создаёт абзац. Между абзацами браузер сам добавляет вертикальный отступ:

<p>Кофейня открылась в 2015 году в старом здании у реки.</p>
<p>Сегодня здесь варят кофе из зёрен шести стран.</p>

Абзац — блок текста об одной мысли. Не пишите длинный текст без <p>: браузер сольёт его в одну сплошную строку.

Пробелы и переносы строк

Несколько пробелов и переводы строк в коде браузер превращает в один пробел. Чтобы перенести строку внутри абзаца, ставят одиночный тег <br>:

<p>Санкт-Петербург,
   Невский     проспект, 1</p>
<p>Санкт-Петербург,<br>Невский проспект, 1</p>

В первом абзаце лишние пробелы и перенос пропали. <br> уместен в адресах и стихах, но не для отступов между абзацами.

Линия и цитата

<hr> — смысловой разрыв, например смена темы; браузер рисует его линией. <blockquote> оформляет длинную цитату из другого источника — браузер сдвигает её вправо:

<p>Конец первой части.</p>
<hr>
<blockquote>
  <p>Простота — необходимое условие надёжности.</p>
</blockquote>
<p>— Эдсгер Дейкстра</p>

Частая ошибка

Не выбирайте заголовок по размеру шрифта. <h4> вместо <h2> «потому что он меньше» ломает оглавление страницы: по заголовкам ориентируются поисковики и программы чтения с экрана. Размер меняют в CSS:

<h1>Рецепты</h1>
<h2 style="font-size: 18px;">Супы</h2>
<p>Это всё ещё заголовок второго уровня, просто меньше.</p>

Атрибут style задаёт CSS прямо у элемента — подробнее о нём в главе про CSS.