🤔 Как проверить правильную иерархию html заголовков?
Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы.
🚩Зачем нужна правильная иерархия заголовков?
🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы.
🚩Что значит "правильная иерархия заголовков"?
🟠`<h1>` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`<h2>` Подразделы <h1>. 🟠`<h3>` Подразделы <h2>, и так далее.
<h1>Главный заголовок страницы</h1> <h2>Раздел 1</h2> <h3>Подраздел 1.1</h3> <h3>Подраздел 1.2</h3> <h2>Раздел 2</h2> <h3>Подраздел 2.1</h3> <h4>Подраздел 2.1.1</h4>
🚩Как проверить иерархию заголовков?
🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, <h1> → <h2> → <h3> и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от <h2> сразу к <h4>).
🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (<h1>, <h2> и так далее) и проверьте их последовательность.
🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: Lighthouse (встроено в Chrome DevTools). Выполните аудит доступности и посмотрите рекомендации. WAVE (Web Accessibility Evaluation Tool) — онлайн-инструмент для анализа доступности. Эти инструменты покажут ошибки или пропуски в структуре заголовков.
🟠Скрипт для автоматической проверки Если вы работаете над большим проектом, можно написать скрипт для проверки иерархии заголовков. const headings = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')]; headings.forEach((heading, index) => { console.log(`${index + 1}: ${heading.tagName} - ${heading.textContent.trim()}`); });
🟠Плагин для анализа заголовков Для популярных CMS (например, WordPress) существуют плагины, которые проверяют структуру заголовков, например, Yoast SEO.
🚩Примеры ошибок в структуре и как их исправить
Ошибка: Пропуск уровней заголовков <h1>Главный заголовок</h1> <h3>Подраздел</h3> <!-- Пропущен <h2> -->
Исправление <h1>Главный заголовок</h1> <h2>Подраздел</h2>
Ошибка: Несколько <h1> на одной странице <h1>Главный заголовок</h1> <h1>Еще один заголовок</h1>
Исправление <h1>Главный заголовок</h1> <h2>Еще один заголовок</h2>
Ставь 👍 и забирай 📚 Базу знаний