Заголовки HTML
Заголовок — это название страницы, помогающее поисковым системам понять её структуру. Узнайте об уровнях, размерах и значимости заголовков HTML.
Заголовки разбивают страницу на помеченные и ранжированные разделы — так же, как названия глав и параграфов организуют книгу. В HTML есть шесть уровней: от <h1> (самого важного) до <h6> (наименее важного). Правильный выбор уровня — это не только размер текста: он определяет структуру документа, на которую опираются браузеры, вспомогательные технологии и поисковые системы при анализе организации контента.
На этой странице рассматриваются шесть тегов заголовков, их вложенная иерархия, разница между размером и уровнем, навигация пользователей экранных считывателей по заголовкам, а также отличие элемента <header> от <h1>–<h6>.
Теги заголовков
В HTML существует 6 уровней заголовков: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>.
Теги <h1> - <h6> используются для разметки заголовков согласно их важности. Тег <h1> обозначает самый важный заголовок веб-страницы, а <h6> — наименее важный и самый маленький.
Пример тегов HTML-заголовков <h1> - <h6>:
Как использовать HTML-теги <h1>–<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Полный справочник по каждому уровню: HTML-теги <h1>–<h6>.
Иерархия заголовков и структура документа
Уровни заголовков — это не просто размеры; они описывают вложенность. <h2> воспринимается как подраздел ближайшего <h1> выше него, <h3> — как подраздел этого <h2> и так далее. Вместе эти вложенные уровни образуют структуру документа: дерево, показывающее, какие части страницы к чему относятся.
Представьте это как оглавление:
<h1>Baking Bread</h1> <!-- the page topic -->
<h2>Ingredients</h2> <!-- a section of "Baking Bread" -->
<h2>Method</h2> <!-- another section -->
<h3>Kneading</h3> <!-- a step inside "Method" -->
<h3>Proving</h3> <!-- another step inside "Method" -->
<h2>Troubleshooting</h2>Отступы выше — только для иллюстрации: в разметке заголовки являются соседними элементами, а иерархию создают номера уровней. Используйте один <h1> для основной темы страницы, затем <h2> для разделов верхнего уровня, <h3> для подразделов — и никогда не выбирайте более низкий уровень только ради уменьшения размера текста.
Доступность: не пропускайте уровни заголовков
Пользователи экранных считывателей редко читают страницу сверху вниз. Вместо этого они вызывают список всех заголовков и переходят прямо в нужный раздел — как при просмотре оглавления. Это работает только когда уровни убывают по порядку — <h1>, затем <h2>, затем <h3> — без пропусков.
Пропуск уровня (например, <h1> сразу за которым следует <h3>) нарушает структуру: вспомогательная технология сообщает об отсутствующем уровне, и пользователи не могут понять, попали ли они в подраздел или просто потеряли своё место.
Плохо — уровень пропущен:
<h1>Our Menu</h1>
<h3>Starters</h3> <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>Хорошо — уровни убывают по одному шагу:
<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>Если заголовок при правильном уровне выглядит слишком большим или слишком маленьким, измените внешний вид с помощью CSS — но не уровень.
Значимость заголовков
- HTML-заголовки выделяют важные темы и структуру документа, тем самым повышая вовлечённость пользователей.
- Используйте только один тег
<h1>на любой веб-странице. Тег должен описывать тему страницы и содержать ключевое слово для улучшения позиций в Google. - Поисковые системы используют заголовки для индексации структуры и содержимого веб-страницы.
Размер заголовков
Браузеры назначают каждому уровню заголовка размер по умолчанию: <h1> — самый крупный, <h6> — самый мелкий. Любой из них можно переопределить с помощью свойства CSS font-size.
Главное: изменение визуального размера заголовка не меняет его семантический уровень. <h2>, стилизованный как огромный, остаётся <h2> в структуре документа, а маленький <h1> по-прежнему является заголовком верхнего уровня страницы. Поэтому выбирайте тег исходя из его места в иерархии, а затем задавайте нужный размер через CSS — никогда не выбирайте тег из-за его стандартного размера.
Пример изменения размера заголовка с помощью свойства font-size:
Как стилизовать HTML-тег <h1> с помощью свойства CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Важные замечания
- Не используйте теги заголовков для увеличения размера текста или его выделения жирным. Вместо этого используйте свойства CSS, такие как font-weight и font-size. Помните: поисковые системы используют заголовки для структурирования контента.
- Не пропускайте уровни заголовков. Используйте
<h1>как главный заголовок веб-страницы, затем<h2>, потом менее важные<h3>и так далее. - Не используйте
<h1>более одного раза на странице.
Связанные элементы
Рядом с заголовками часто встречаются несколько тегов, но каждый из них относится к своей теме:
- Тег
<hr>рисует тематический разделитель между разделами контента. - Элемент
<head>содержит метаданные страницы (заголовок, кодировку, стили, скрипты) и не является частью видимого контента.
Заголовок (heading) vs. шапка (header): <h1>–<h6> и <header>
Эти два элемента легко перепутать, поскольку их названия похожи, но выполняют они разные задачи:
- Заголовок (
<h1>–<h6>) — это одиночный заголовок, обозначающий раздел контента и задающий ему уровень в структуре документа. - Шапка (
<header>) — это контейнер для вводного контента в верхней части страницы или раздела: обычно логотип, название сайта и навигация. Она часто содержит заголовок, но сама заголовком не является.
Сравним их рядом:
<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>
<!-- A header: a block of introductory content that wraps a heading -->
<header>
<img src="logo.png" alt="Acme logo" />
<h1>Weekly Newsletter</h1>
<nav>
<a href="/archive">Archive</a>
<a href="/subscribe">Subscribe</a>
</nav>
</header>Коротко: помещайте заголовок внутрь шапки, когда нужен вводный блок с названием; используйте отдельный заголовок, когда нужно просто обозначить раздел. Подробнее читайте в главе HTML-тег <header>.