Заголовки в HTML — это не просто способ сделать текст крупнее. Это структурный каркас страницы, который помогает и человеку, и поисковику понять, о чём речь и в каком порядке идут смысловые блоки. Для этого в языке разметки есть шесть уровней заголовков: от H1 (самый главный) до H6 (самый мелкий).
Что означают уровни H1–H6
У каждого уровня своя роль:
- H1 — главный заголовок страницы. Он должен быть один и отражать суть документа.
- H2 — основные разделы. Если страница делится на крупные части, это именно они.
- H3 — подразделы внутри H2.
- H4–H6 — вложенные уровни для детализации. На практике H4–H6 используют редко: если приходится уходить глубже, чаще пересматривают структуру текста.
Важно: уровни не про размер шрифта. Да, браузеры по умолчанию делают H1 крупнее, а H6 мельче, но смысл не в этом. Смысл — в иерархии. Размер можно поменять через CSS, а смысловая роль останется прежней.
Синтаксис: как писать
<h1>Главный заголовок</h1> <h2>Подраздел</h2> <h3>Ещё более детальный подраздел</h3> <h4>Ещё глубже</h4> <h5>Ещё чуть глубже</h5> <h6>Самый мелкий уровень</h6>
Главный заголовок
Подраздел
Ещё более детальный подраздел
Ещё глубже
Ещё чуть глубже
Самый мелкий уровень
Никаких атрибутов для «уровня» не нужно: сам тег задаёт уровень. Закрывающий тег обязателен.
Реальный пример: страница-каталог статей
Допустим, у нас есть страница «Статьи про Python». На ней — несколько тематических разделов и статьи внутри них. Построим правильную иерархию.
Структура в словах
- Главный заголовок: «Статьи про Python» (H1).
- Разделы: «Основы», «Работа с данными», «Веб-разработка» (H2).
- Внутри «Основы»: «Переменные и типы», «Операторы», «Циклы» (H3).
- В «Переменные и типы» можно выделить «Преобразование типов» как H4, если тема достаточно крупная.
Готовый HTML-код
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Статьи про Python</title> </head> <body> <h1>Статьи про Python</h1> <section> <h2>Основы</h2> <article> <h3>Переменные и типы</h3> <p>Здесь рассказывается про переменные, типы данных и базовые операции.</p> <article> <h4>Преобразование типов данных</h4> <p>Примеры int(), float(), str() и типичные ошибки.</p> </article> </article> <article> <h3>Операторы</h3> <p>Арифметические, логические и операторы сравнения.</p> </article> <article> <h3>Циклы</h3> <p>for, while и примеры использования.</p> </article> </section> <section> <h2>Работа с данными</h2> <article> <h3>Чтение и запись файлов</h3> <p>Как работать с текстовыми и CSV-файлами.</p> </article> <article> <h3>Работа с датой и временем</h3> <p>Модуль datetime, форматирование, часовые пояса.</p> </article> </section> <section> <h2>Веб-разработка</h2> <article> <h3>Быстрый старт с Flask</h3> <p>Установка, первый маршрут, шаблоны.</p> </article> </section> </body> </html>
Статьи про Python
Основы
Переменные и типы
Здесь рассказывается про переменные, типы данных и базовые операции.
Преобразование типов данных
Примеры int(), float(), str() и типичные ошибки.
Операторы
Арифметические, логические и операторы сравнения.
Циклы
for, while и примеры использования.
Работа с данными
Чтение и запись файлов
Как работать с текстовыми и CSV-файлами.
Работа с датой и временем
Модуль datetime, форматирование, часовые пояса.
Веб-разработка
Быстрый старт с Flask
Установка, первый маршрут, шаблоны.
Обратите внимание: мы не пытаемся «выстроить» уровни только ради красоты. Мы отражаем реальную структуру контента. Если внутри «Переменные и типы» нет вложенных тем, H4 не нужен.
Частые ошибки
- Несколько H1 на странице. На одной странице должен быть один H1. Если кажется, что нужно два — скорее всего, это две разные страницы.
- Пропуск уровней. Не стоит делать H1 → H3. Правильная последовательность: H1 → H2 → H3 → H4 и т. д. Пропуск уровня ломает иерархию и усложняет восприятие.
- Использование заголовков ради стиля. Делать H3 просто потому, что хочется крупный жирный текст, — неправильно. Для стилизации используйте CSS.
- Слишком длинные заголовки. В H1 лучше держать 5–8 слов. Длинные фразы хуже воспринимаются и могут мешать SEO.
Пример неправильного подхода:
<!-- Плохо: два H1 и пропуск уровня --> <h1>Python для начинающих</h1> <h1>Часть 1: основы</h1> <h3>Переменные</h3>
Правильно:
<h1>Python для начинающих</h1> <h2>Часть 1: основы</h2> <h3>Переменные</h3>
Зачем это нужно: польза иерархии
- Для пользователей. Человек быстро сканирует страницу по заголовкам и сразу видит, где нужная тема.
- Для доступности. Скринридеры озвучивают уровни заголовков, помогая ориентироваться людям с нарушениями зрения.
- Для поисковых систем. Поисковики используют заголовки, чтобы понять структуру и релевантность страницы. H1 особенно важен для понимания темы документа.
Как стилизовать заголовки без потери семантики
Размер, цвет и отступы задают через CSS, не трогая HTML. Например:
h1 { font-size: 2rem; margin-bottom: 1rem; color: #222; } h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 0.8rem; color: #333; } h3 { font-size: 1.25rem; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #444; }
Так вы сохраняете смысловую иерархию, но управляете внешним видом отдельно.
Практический совет: как проверять структуру
Есть несколько способов убедиться, что иерархия построена правильно:
- В браузере. Откройте инструменты разработчика (F12) и посмотрите DOM-дерево: заголовки должны идти по порядку без пропусков.
- Онлайн-валидаторы структуры. Существуют сервисы, которые показывают «карту заголовков» страницы.
- Скринридер или режим чтения. Включите режим чтения в браузере или используйте скринридер: если навигация по заголовкам логична, структура хорошая.
Мини-задача для тренировки
Попробуйте самостоятельно разметить страницу «Каталог статей» с такими темами:
- Главная тема: «HTML и CSS для новичков».
- Разделы: «Базовые теги», «Стилизация», «Адаптивная вёрстка».
- Внутри «Базовые теги»: «Заголовки и параграфы», «Списки», «Картинки и ссылки».
- Внутри «Стилизация»: «Цвета и шрифты», «Отступы и рамки» (с примерами border-radius и box-shadow).
Правильная разметка будет выглядеть примерно так:
<h1>HTML и CSS для новичков</h1> <section> <h2>Базовые теги</h2> <article><h3>Заголовки и параграфы</h3></article> <article><h3>Списки</h3></article> <article><h3>Картинки и ссылки</h3></article> </section> <section> <h2>Стилизация</h2> <article><h3>Цвета и шрифты</h3></article> <article><h3>Отступы и рамки</h3></article> </section> <section> <h2>Адаптивная вёрстка</h2> </section>
Если внутри «Отступы и рамки» вы захотите отдельно рассказать про border-radius и box-shadow, можно добавить H4:
<article> <h3>Отступы и рамки</h3> <article><h4>border-radius: скругление углов</h4></article> <article><h4>box-shadow: тени для элементов</h4></article> </article>
Таким образом, заголовки H1–H6 — это простой и мощный инструмент, который делает страницу понятной, доступной и удобной. Главное — не использовать их как средство оформления, а строить с их помощью логичную иерархию контента.
Загрузка...