Почему нельзя сделать несколько заголовков h1?

Почему использование нескольких <h1> на странице — плохая практика

На самом деле, технически ничто не мешает вам разместить несколько тегов <h1> в HTML-документе. Браузер корректно отобразит все заголовки первого уровня, и страница не "сломается". Однако, это нарушает ключевые принципы семантической разметки, доступности (accessibility) и поисковой оптимизации (SEO), превращаясь в серьезную проблему для структуры и восприятия контента.

Основные причины использовать только один <h1> на странице

1. Семантическая целостность и логическая структура

Тег <h1> — это главный заголовок всего документа или раздела (в рамках HTML5 и секционирующих элементов). Он определяет основную тему страницы. Несколько <h1> создают смысловую путаницу: какой из заголовков является по-настоящему главным? Это все равно, что в книге дать первой главе и каждому подразделу одинаковый статус "Название книги".

<!-- ❌ Плохо: несколько h1 путают иерархию -->
<h1>Магазин электроники</h1>
<h1>Смартфоны</h1>
<h1>Apple iPhone 15</h1>

<!-- ✅ Правильно: четкая иерархия заголовков -->
<h1>Магазин электроники "Гаджет"</h1>
<h2>Каталог товаров</h2>
<h3>Смартфоны и планшеты</h3>
<h4>Apple iPhone 15 Pro Max</h4>

2. Доступность для вспомогательных технологий

Пользователи с ограниченными возможностями, особенно те, кто используют скринридеры (программы чтения с экрана), сильно зависят от правильной структуры заголовков. Навигация по заголовкам (h1-h6) — один из основных способов восприятия и исследования страницы.

• Навигация становится хаотичной: Когда скринридер объявляет "Заголовок первого уровня", пользователь ожидает услышать основную тему. Несколько h1 дезориентируют, заставляя думать, что начался новый, независимый раздел или даже новая страница.
• Потеря контекста: Слабовидящие пользователи не могут быстро "пробежаться глазами" по странице. Логическая иерархия заголовков — их карта местности. Несколько h1 разрушают эту карту.

3. Поисковая оптимизация (SEO)

Поисковые системы (Google, Яндекс) анализируют HTML-структуру, чтобы понять содержание и релевантность страницы. Для них <h1> — мощный сигнал о ключевой теме документа.

• Размытие релевантности: Если на странице несколько h1, поисковому роботу сложно определить, какой запрос является основным. Это может негативно сказаться на ранжировании, так как основной ключевой сигнал ослабевает.
• Нарушение ожидаемой модели: Поисковики десятилетиями обучались на миллиардах корректно размеченных страниц, где h1 — единственный и главный. Отклонение от этой модели может быть расценено как манипуляция или низкое качество кода.

4. Спецификация HTML5 и секционирующие элементы

С появлением HTML5 и семантических тегов (<article>, <section>, <aside>, <nav>) теоретически появилась возможность использовать <h1> внутри каждого такого независимого раздела. Алгоритм аутлайна документа (document outline) предполагал, что каждый секционирующий элемент создает свой собственный контекст для иерархии заголовков.

Однако эта идея на практике провалилась:

• Браузеры и вспомогательные технологии не реализовали полноценную поддержку аутлайна.
• Основные скринридеры и поисковики продолжают интерпретировать заголовки глобально (h1-h6), а не в изоляции внутри секций.
• Поэтому даже в рамках <article> или <section> рекомендуется продолжать использовать последовательную иерархию (h2-h6), чтобы обеспечить максимальную совместимость и предсказуемость.

Исключения и современный контекст

В очень специфических случаях, например, в SPA (Single Page Application) или сложных веб-приложениях, где контент динамически меняется без перезагрузки страницы, теоретически может возникнуть ситуация с несколькими логически главными заголовками. Но даже здесь лучшей практикой является:

1. Управление видимостью (показывать только один актуальный h1).
2. Использование ARIA-атрибутов (aria-labelledby, aria-level) для программного управления доступностью, если семантика HTML недостаточна.

Практические рекомендации и вывод

1. Строгое правило: Одна страница — одна основная тема — один тег <h1>.
2. Стройте иерархию правильно: Используйте вложенность h2, h3, h4 и т.д., чтобы отразить структуру документа. Не пропускайте уровни (например, не переходите с h2 сразу на h4).
3. Проверяйте доступность: Протестируйте навигацию по заголовкам с помощью скринридера (NVDA, VoiceOver) или инструментов разработчика (например, вкладка "Accessibility" в Chrome DevTools).
4. Думайте о пользователе: Четкая структура помогает всем пользователям быстрее находить нужную информацию, независимо от того, как они потребляют контент.

Таким образом, отказ от множественных <h1> — это не техническое ограничение, а признак профессиональной верстки, который демонстрирует заботу о семантике, доступности, SEO и, в конечном счете, о пользовательском опыте.