Как проверить правильность иерархии заголовков в HTML?

Проверить правильность иерархии заголовков можно несколькими способами:

1. Визуальный анализ кода: Простой просмотр HTML-структуры позволяет быстро выявить очевидные ошибки, например, пропуск уровней (<h1> сразу после <h3>).

   <!-- Неправильная иерархия (нет <h2>) -->
   <h1>Главный заголовок</h1>
   <h3>Подзаголовок</h3>
   
   <!-- Правильная иерархия -->
   <h1>Главный заголовок</h1>
   <h2>Подзаголовок</h2>
   <h3>Под-подзаголовок</h3>
   

2. Использование инструментов разработчика (DevTools): В браузере можно просмотреть структуру DOM и явно увидеть порядок следования тегов заголовков. Во многих браузерах есть вкладки для просмотра DOM-дерева.

3. Применение валидаторов HTML: Онлайн-валидаторы (например, от W3C) анализируют весь HTML-документ и могут указать на проблемы с семантикой и структурой, включая неправильное использование заголовков. Однако они не гарантируют проверку именно иерархии в контексте всего документа.

4. Использование расширений для браузера и специальных инструментов: Существуют расширения (например, SEO-анализаторы) и отдельные программы, которые сканируют веб-страницу и предоставляют отчет о структуре заголовков, их уровнях и вложенности. Некоторые из них визуализируют иерархию.

5. Написание скриптов: Можно использовать скрипты (например, на JavaScript) для извлечения всех элементов заголовков (<h1> - <h6>) и анализа их порядка в документе.

   // Получаем все элементы заголовков
   const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
   
   let currentLevel = 0;
   let isCorrect = true;
   
   headings.forEach(heading => {
     const level = parseInt(heading.tagName.substring(1)); // Извлекаем уровень (1-6)
   
     if (currentLevel === 0) {
       // Первый заголовок должен быть h1
       if (level !== 1) {
         isCorrect = false;
         console.error('Первый заголовок не h1:', heading);
       }
     } else {
       // Следующий уровень не должен быть больше текущего+1
       if (level > currentLevel + 1) {
         isCorrect = false;
         console.error('Найден пропуск уровня заголовка:', heading, 'после уровня', currentLevel);
       }
     }
     currentLevel = level;
   });
   
   if (isCorrect) {
     console.log('Иерархия заголовков, вероятно, правильная.');
   } else {
     console.error('Иерархия заголовков нарушена.');
   }
   

6. Ручное тестирование с использованием инструментов доступности (Accessibility Tools): Некоторые инструменты для проверки доступности (например, Lighthouse в Chrome DevTools) анализируют структуру заголовков и могут давать рекомендации.

7. Просмотр структуры документа в специальных SEO-инструментах: Многие SEO-платформы имеют функции анализа структуры заголовков на странице.

Важно помнить, что "правильная" иерархия означает последовательное использование уровней (h1, h2, h3...) без пропусков, за исключением случаев, когда более низкий уровень (например, h4) встречается после более высокого (например, h2 без h3 между ними), но вложенность в этом случае должна быть логичной. Обычно рекомендуется начинать с <h1> и переходить к <h2>, затем <h3> и так далее, не пропуская уровни. И на странице должен быть только один <h1>.