Регламент по разработке и применению тегов h1–h6

1. Общие положения

Заголовки h1–h6 используются для создания логически последовательной структуры контента на веб-страницах. Они определяют иерархию смысловых блоков и обеспечивают корректное восприятие документа поисковыми системами, вспомогательными технологиями и пользователями.

2. Назначение уровней заголовков

h1 — Заголовок первого уровня.
• Используется один раз на странице.
• Отражает основную тему или цель страницы.
• Допустимое расположение: в основной области контента. Размещение в футере, сайдбаре или неосновных зонах запрещено.

h2 — Заголовки второго уровня.
• Формируют ключевые смысловые разделы страницы.
• Количество не ограничено.
• Располагаются сразу под h1 или в составе других смысловых блоков.

h3 — Заголовки третьего уровня.
• Применяются для структуризации разделов, оформленных через h2.
• Отражают подтемы, детали и разделённые части блока.

h4–h6 — Заголовки четвёртого и ниже уровней.
• Используются при необходимости глубокой вложенности.
• Применяются только при наличии логически обоснованной структуры.
• Не рекомендуется использовать уровни ниже h4 без реальной потребности.

3. Правила иерархии

1. Переход между уровнями осуществляется последовательно: h1 → h2 → h3 → h4 и далее.

2. Пропуск уровней без необходимости запрещён (например, h2 → h4 без h3).

3. Повторный подъём по структуре допускается только ступенчато: h3 → h2 допустимо, h3 → h1 — нет.

4. Заголовки должны соответствовать смыслу блока, который они открывают; не применяются для декоративного оформления текста.

4. Требования к содержанию заголовков

1. Формулировка должна кратко описывать содержание последующего текста.

2. Включение ключевых слов допускается, если не нарушает естественность текста.

3. Запрещено использование заголовков для размещения CTA-фраз, рекламных сообщений или элементов интерфейса.

4. Каждый заголовок открывает самостоятельный логический блок.

5. Технические требования

1. Заголовки размечаются только семантическими HTML-тегами h1–h6, без замены на div/span с классами.

2. Визуальное оформление (размер, цвет, жирность) задаётся исключительно через CSS.

3. Недопустимо применять reset-ы или глобальные стили, которые уравнивают все заголовки по размеру или внешнему виду — визуальная иерархия должна быть сохранена.

4. Не допускается создание скрытых заголовков с помощью display: none или visibility: hidden.

5. Допустимо использовать технику «визуально скрытого» заголовка для доступности (например, .visually-hidden) только при наличии UX-обоснования.

6. Каждый заголовок должен присутствовать в DOM в том порядке, в котором он визуально отображён на странице. Манипуляции CSS для искусственного перемещения заголовков вверх или вниз запрещены.

6. Требования к SEO и доступности

1. h1 должен чётко описывать контент страницы и совпадать с основной темой.

2. Наличие нескольких h1 возможно только при использовании HTML5-структур (section/article), но не рекомендуется без веской причины.

3. Читабельность и ясность заголовков — приоритет.

4. Заголовки должны корректно читаться скринридерами; непонятные, короткие или «пустые» заголовки не допускаются.

5. Структура документа должна оставаться понятной при навигации только по заголовкам (например, через инструмент "Outline").

7. Примеры корректной структуры

8. Типовые ошибки

• Несколько h1 без структурных оснований.
• Использование заголовков по принципу «больше шрифт = выше уровень».
• Пропуск уровней вложенности.
• Отсутствие заголовков при больших объёмах текста.
• Применение заголовков для SEO-переспама.

Просмотров: 1