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

В HTML шесть уровней заголовков, от h1 до h6, и пользователи экранных дикторов часто перескакивают от заголовка к заголовку, чтобы сориентироваться на странице.

План из заголовков

Представь книгу рецептов. У книги есть название, у каждого рецепта своё имя, а внутри рецепта есть части поменьше, например «Ингредиенты» и «Приготовление». HTML передаёт такой же план шестью элементами заголовков, от <h1> до <h6>. <h1> является верхним уровнем, обычно это название страницы. <h2> отмечает главные разделы, <h3> части внутри раздела и так далее. Большинству страниц хватает трёх или четырёх уровней.

<h1>Weekend Baking</h1>
<p>Three simple breads you can make at home.</p>

<h2>Soda bread</h2>
<h3>Ingredients</h3>
<p>Flour, baking soda, salt and buttermilk.</p>
<h3>Method</h3>
<p>Mix, shape into a round and bake for 40 minutes.</p>

<h2>Flatbread</h2>
<p>Ready in 20 minutes, no oven needed.</p>

Выбирай уровень по структуре, а не по размеру

Браузеры рисуют <h1> крупно, а <h6> мелко, и хочется выбрать заголовок по размеру. Не поддавайся. Уровень сообщает программам, как устроена страница. Экранные дикторы умеют перечислить все заголовки страницы и сразу перейти к нужному, почти как по оглавлению. Поисковики тоже по заголовкам понимают, о чём страница. Если хочешь, чтобы h2 выглядел мельче, оставь его h2 и измени размер через CSS.

Две привычки держат план в порядке. Во-первых, используй один <h1> на страницу для её главного названия: так советует MDN, и этого ждёт большинство пользователей. Во-вторых, не пропускай уровни при движении вниз: после h2 идёт h3, а не h5. Подниматься обратно можно, так что после h3 может стоять новый h2, когда начинается следующий раздел.

Абзацы

Сплошной текст помещается в элементы <p>, по одному на абзац. HTML схлопывает пробелы, поэтому двойное нажатие Enter в файле не создаёт на экране новый абзац; это делает только новый <p>. По умолчанию браузеры добавляют отступ сверху и снизу каждого абзаца, и CSS может его изменить. Абзац не может содержать другой абзац или заголовок, поэтому если ты забыл закрывающий </p>, браузер закроет его сам, как только начнётся следующий блочный элемент.

Иногда сами переносы строк являются частью содержимого, как в почтовом адресе или стихотворении. Тогда ставь <br> в конце каждой строки внутри одного абзаца или <address>. Не используй кучу элементов <br>, чтобы сделать отступ по вертикали: это задача полей (margin) в CSS. Чтобы отметить смену темы внутри раздела, например смену сцены в рассказе, используй <hr>, тематический разрыв, который браузеры рисуют горизонтальной линией.

Цитаты

Длинная цитата из другого источника помещается в <blockquote>, и браузеры показывают её с отступом. Положи внутрь цитируемые абзацы, а адрес источника можно указать в атрибуте cite. Короткая цитата внутри предложения оформляется через <q>, и браузер сам добавит кавычки. Элемент <cite> отмечает название произведения, например книги или фильма.