HTML · текст

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

Заголовки в HTML — это теги от h1 до h6, абзацы — тег p, а перенос строки — тег br. Разберём, как ими пользоваться, на простых примерах.

Работает во всех браузерахПроверено 20 октября 20266 минут чтения

Заголовки h1–h6: как они устроены

Заголовки задают структуру (иерархию) страницы и работают как оглавление в книге. Есть название книги, есть главы, а в главах — разделы. На странице так же:

• h1 — главный заголовок, название страницы. Обычно он один.
• h2 — заголовки крупных разделов.
• h3 — подразделы внутри h2.
• h4–h6 — ещё глубже. Нужны редко.

<h1>Как выбрать ноутбук</h1>

<h2>Основные характеристики</h2>
  <h3>Процессор</h3>
  <h3>Оперативная память</h3>

<h2>Итоги</h2>

Главное правило: уровень заголовка выбирают по смыслу, а не по размеру. Нужен заголовок поменьше? Оставь h2 и уменьши его через CSS. И не пропускай уровни: после h2 идёт h3, а не сразу h4.

Какого размера заголовки по умолчанию

Если не писать никаких стилей, браузер сам сделает заголовки жирными и крупнее обычного текста:

Тег p: абзац в HTML

Тег p (от англ. paragraph) — это абзац. Одна мысль — один абзац. Браузер сам добавит между абзацами отступ.

<p>Редактор подсвечивает теги и помогает не запутаться.</p>
<p>Для учёбы подойдёт любой бесплатный редактор.</p>

Внутрь p нельзя класть другие блоки (блочные элементы): второй абзац, div, список или заголовок. Иначе браузер сам закроет абзац раньше, и страница будет выглядеть не так, как ты задумал.

Тег br: перенос строки

Тег br (от англ. break — разрыв) переносит текст на новую строку, но не начинает новый абзац. Закрывать его не нужно: это одиночный (пустой) тег. Используй br, когда перенос важен по смыслу: в адресе, в стихах, в подписи.

<address>
  Москва,<br>
  ул. Примерная, 10
</address>

Чтобы сделать отступ между блоками, br не подходит. Для этого есть CSS.

Зачем нужны заголовки

Правильные заголовки делают страницу лучше сразу в трёх смыслах:

• Удобство (UX). Люди редко читают страницу целиком. Сначала они пробегают глазами по заголовкам и ищут нужный раздел. Понятные заголовки = человек быстрее находит ответ и не уходит с сайта.
• Доступность (accessibility). Часть посетителей пользуется скринридерами — программами, которые читают страницу вслух. По тегам h1–h6 программа строит список разделов, и по нему можно сразу перейти к нужному. Жирный текст вместо настоящего заголовка в этот список не попадёт.
• Поиск (SEO). Яндекс и Google по заголовкам понимают, о чём страница. Поэтому в h1 пиши то, что человек вводит в поиск: например, «Как выбрать ноутбук», а не «Наши советы».

Как изменить размер заголовка в CSS

Бывает, что по смыслу нужен h2, а выглядеть он должен меньше. Тег не меняем, а добавляем класс и задаём размер через свойство font-size:

<h2 class="small-title">Похожие статьи</h2>

.small-title {
  font-size: 20px;
}

Ещё пара полезных настроек для текста:

h1, h2, h3 {
  line-height: 1.2;     /* расстояние между строками */
  text-wrap: balance;   /* строки одинаковой длины */
}

p {
  max-width: 65ch;      /* строка не слишком длинная */
}

text-wrap: balance следит, чтобы в длинном заголовке одно слово не оставалось одно на последней строке. Работает в Chrome, Firefox и Safari последних версий. В старых браузерах заголовок просто покажется как обычно.

Частые ошибки

• Брать h4, потому что он «поменьше». Размер меняют в CSS.
• Пропускать уровни: после h2 сразу h4.
• Делать заголовок из жирного текста вместо тега h2.
• Ставить пустые p или много br подряд, чтобы сделать отступ.
• Класть div внутрь p.
• Писать огромные абзацы. Если в абзаце две мысли — раздели его на два.

Вопросы и ответы

<h1>Как завести кота</h1>
<p>Кот — это лет пятнадцать совместной жизни, поэтому к решению стоит подготовиться.</p>

<h2>Что купить заранее</h2>
<p>Лоток, наполнитель, миски, когтеточку и переноску.</p>

<h2>Первые дни дома</h2>
<p>Дайте коту одну тихую комнату, пусть освоится.</p>
<h3>Если кот прячется</h3>
<p>Это нормально. Не вытаскивайте его, он выйдет сам.</p>

<h2>Визит к ветеринару</h2>
<p>Запишитесь на осмотр в первые две недели.</p>