Почему заголовки важны в HTML: структура, доступность и SEO

Когда люди думают о заголовках на веб-сайтах, они часто представляют себе их внешний вид: крупный жирный текст, привлекающий внимание.

В HTML заголовки не только придают странице визуальный стиль. Неправильное использование заголовков в HTML или их отсутствие негативно сказывается на удобстве использования, доступности и эффективности поиска.

Заголовки имеют семантическое, а не только визуальное значение

Заголовки имеют семантическое значение, то есть HTML-заголовки (<h1> — <h6>) отражают иерархию контента на странице.

Существует 6 уровней HTML-заголовков.

• <h1> — это тема верхнего уровня на странице. На практике следует использовать только один тег H1 на странице. Технически HTML5 допускает использование нескольких тегов H1, но это может сбить с толку вспомогательные технологии (поскольку им будет сложнее определить фактическое название страницы).
• <h2> — используются для обозначения основных разделов в рамках основной темы H1.
• <h3> — представляют собой подразделы в рамках раздела <h2>
  и так далее.

Заголовки создают логическую структуру вашей страницы. Хорошо структурированная страница похожа на хорошо структурированную книгу. Например, предположим, что у нас есть книга под названием «Что такое веб-доступность» с двумя главами: «Почему доступность важна» и «Как создавать доступные интерфейсы».

Допустим, в первой главе «Почему важна доступность» есть подразделы «Влияние на пользователей» и «Законодательные требования» Во второй главе «Как создавать доступные интерфейсы» есть подраздел «Цветовой контраст».

В виде маркированного списка мы можем представить оглавление книги «Что такое веб-доступность» следующим образом:

• Что такое доступность в Интернете
  • Почему важна Доступность
    • Влияние на пользователей
    • Юридические требования
  • Как создавать доступные интерфейсы
    • Цветовой Контраст

По тому же принципу, что и маркированные списки, мы можем использовать заголовки в HTML для структурирования книги.

<h1>What is Web Accessibility?</h1> 
    <h2>Why Accessibility Matters</h2> 
        <h3>Impact on Users</h3> 
        <h3>Legal Requirements</h3> 
    <h2>How to Design Accessible Interfaces</h2> 
        <h3>Color Contrast</h3>

В нашем примере с книгой есть только один заголовок H1 — это название книги. У книги не может быть двух названий, не так ли?

Затем каждая глава помечается тегом H2, указывающим на то, что она находится на один уровень «ниже» заголовка/основного раздела. Далее идут теги H3, обозначающие подразделы внутри каждой главы.

Обратите внимание, что не стоит просто переходить от H1 к H3 (если только у вас нет на то веской структурной причины). Это всё равно что открыть книгу и сразу перейти к подразделу, минуя начало главы. Вряд ли в этом будет какой-то смысл.

Структура заголовков позволяет людям, использующим вспомогательные технологии (и всем остальным), быстро просматривать контент и понимать иерархию страниц.

Стили задаются с помощью CSS, а не уровня заголовков

Распространённая ошибка, которую часто допускают разработчики, заключается в использовании тега heading только потому, что он выглядит крупным и соответствует ожиданиям от дизайна. Неправильное использование уровней заголовков может привести к проблемам с доступностью, поскольку страница будет иметь неправильную структуру.

Важно помнить, что уровень заголовка не следует выбирать исходя из стиля. Уровень заголовка следует выбирать исходя из структуры. Затем используйте CSS для управления визуальным оформлением.

Заголовки обеспечивают навигацию для вспомогательных технологий

Использование правильной структуры заголовков на веб-страницах имеет решающее значение для обеспечения доступности. Пользователи программ чтения с экрана могут использовать сочетания клавиш для перехода от одного заголовка к другому. С помощью программы чтения с экрана они могут перейти к определенному разделу и начать прослушивание контента с этого места.

Точно так же, как использование тегов заголовков для стилизации — плохая идея, так и полное отсутствие тегов заголовков — плохая идея. Если вы выделяете текст жирным шрифтом или увеличиваете его размер с помощью CSS, но не оформляете его как полноценный заголовок, программа для чтения с экрана не будет знать, что на странице есть разрыв или изменение содержимого. Это не позволит пользователю быстро просматривать страницу или переходить по ней.

Например, у нас есть страница товара.

<p style="font-weight: bold;">Product Page</p>
<p>Price</p>
<p>Features</p>

Отсутствие заголовка на странице продукта означает, что контент представляет собой гигантскую стену текста, которую программа чтения с экрана должна прослушивать последовательно, что увеличивает время, необходимое пользователю для прочтения контента.

В этом простом примере мы стилизовали заголовок страницы с помощью классов CSS, но не использовали тег heading. Пользователи программ для чтения с экрана не смогут точно определить, что «Страница товара» — это заголовок страницы. Они не получают подсказок о содержимом из стилей CSS.

Более эффективным способом создания страницы товара будет использование таких заголовков:

<h1>Product Page</h1>
  <h2>Price</h2>
  <h2>Features</h2>

Использование правильных тегов заголовков позволяет пользователям программ чтения с экрана перемещаться по страницам с помощью заголовков и быстрее получать информацию на странице.

Заголовки помогают SEO и поисковым системам

Google и другие поисковые системы анализируют заголовки, чтобы получить важную информацию о контенте. По тегу H1 они могут определить основную тему (о чем страница), ключевые подтемы (обозначенные тегом H2) и дополнительные сведения под каждой подтемой (H3 и так далее).

Хорошо структурированные заголовки упрощают индексацию контента и повышают вероятность того, что он будет лучше ранжироваться в поиске. Например, Google использует заголовки для создания структуры страницы, похожей на оглавление. Затем он сопоставляет эту структуру/основные темы с нужными поисковыми запросами.

И хотя современные поисковые системы вполне могут обрабатывать страницы с несколькими заголовками H1 без существенного ущерба для SEO, использование одного четкого основного <h1> заголовка — хорошая практика для большей ясности.

Заключение

Заголовки в HTML — это не инструмент для стилизации, а семантический инструмент. Заголовки следует использовать для определения иерархии содержимого страницы, помощи пользователям в навигации, обеспечения доступности контента и улучшения SEO. Правильно оформленные заголовки делают HTML-код понятным как для людей, так и для машин.