1. 7. 4. Шаг 3. Выделяем заголовок всего документа и заголовки смысловых разделов
Previous1. 7. 3. Шаг 2. Размечаем в блоках крупные смысловые разделыNext1. 7. 5. Шаг 4. Размечаем мелкие элементы в смысловых разделах
Last updated
Last updated
Следующий этап после выделения крупных смысловых блоков — разметка заголовков.
Заголовок — это обманчиво простой тег. Главная проблема с заголовками такая: не всегда то, что кажется заголовком, им является. Зачастую вы видите очень крупный текст на макете и думаете, что это заголовок, но это не всегда так. Прежде всего важен не внешний вид заголовков, а их смысл.
Чтобы легко работать с заголовками, нужно понять их основную функцию в тексте. Основная роль заголовка — резюмирующая, он очень сжато передаёт содержание последующего текста. Прочитав заголовок, вы понимаете, что будет после него. Если резюмирующая роль выполняется, это точно заголовок.
Подходящие по смыслу заголовки лучше добавлять в разметку страницы, даже если в макете заголовок документа или смыслового блока отсутствует. Так документ будет более структурированным. При этом, чтобы свёрстанный сайт визуально полностью соответствовал макету, такие «невидимые» заголовки скрываются с помощью специального класса в CSS. Таким образом «визуально скрытый» заголовок остаётся видимым для поисковиков и скринридеров.
Давайте отработаем навык определения на макете элементов, соответствующих заголовочным тегам (<h1>-<h6>). Рассмотрим макет и разберём часто встречающиеся ошибки при определении заголовков в документе.
На первом макете выделены кандидаты на роль заголовков, но, как видно из второго макета, не все из них таковыми являются.
Начнём с заголовка первого уровня. Было бы большой ошибкой сделать заголовком первого уровня самый крупный текст на странице — текст «Долго, дорого, скрупулёзно». Во-первых, этот текст не содержательный. Во-вторых, это текст одного из нескольких слайдов, то есть существует как минимум несколько похожих блоков. То есть этот заголовок не может быть главным. Максимум — это заголовок второго уровня, но нужно ещё проверить его роль для последующего текста.
А на роль заголовка всего документа подойдёт текст: Интернет-магазин «Nёrds». Несмотря на то, что этого текста нет в макете, в разметку его нужно добавить в «скрытом» виде.
Дальше идёт смысловой блок «Услуги», у которого на макете также нет заголовка. Давайте добавим этому блоку «скрытый» содержательный заголовок второго уровня. Далее идут названия самих услуг. Являются ли эти элементы важными, смысловыми, содержательными? Да, являются, потому что это описание того, чем живёт студия, описание услуг. Значит, «веб-сайты», «приложения», «презентации» станут уже <h3>.
Есть также альтернативный вариант: пропустить «скрытый» заголовок «Услуги» и сделать названия услуг заголовками второго уровня.
Далее, текст «Мы — маленькая, но гордая веб-студия из Краснодара» — заголовок или нет? Не заголовок. Почему? Это само содержание, а не его резюме. Из этого текста непонятно, что будет дальше, что именно студия делает. Хорошим заголовком для этого блока был бы текст «О нас» или «О студии».
Текст «Давайте дружить, это выгодно!» также не является заголовком, это скорее призыв к действию, и его стоит разметить обычным тегом <p>.
В итоге получилась такая разметка:
Почему так важно правильно размечать заголовки, не путать их последовательность, не пропускать их по уровням?
Во-первых, потому, что если структура заголовков продумана и сделана логично, то каждый следующий заголовок помогает структурировать контент в блоке, озаглавленном заголовком предыдущего уровня, это помогает восприятию и улучшает читаемость контента.
И в-третьих, есть люди, которые читают тексты в режиме «статей», с упрощённым максимально дизайном, и тогда инструмент, преобразующий дизайн в чёрно-белый стиль «для чтения» придаст заголовкам те размеры и стили, которые соответствуют их уровню. Есть люди, которые пользуются скринридерами, тогда все заголовки могут быть выведены как навигация по странице, и если они перепутаны — это испортит весь контент. Есть и более специфичные причины, но и этих более чем достаточно.
Кстати, у валидатора w3c есть специальный режим для вывода структуры заголовков и структуры страницы.
Во-вторых, это важно для правильной индексации сайта. В конце концов, семантика в разметке важна не столько для пользователя, сколько для коллег, поисковых роботов и правильной работы сервисов и дополнительных интегрированных технологий. Так, у валидатора w3c () один из критериев — это именно структура заголовков. Подробнее о валидации — в материале углублённой теории.
