Frontend | Вопросы собесов

🤔 Как проверить правильную иерархию html заголовков? Проверить правильную иерархию HTML-заголовков важно для улучшения доступности (Accessibility) и SEO. Правильная структура заголовков помогает пользователям (включая тех, кто использует скринридеры) и поисковым системам лучше понимать содержание страницы. 🚩Зачем нужна правильная иерархия заголовков? 🟠Логическая структура Заголовки задают структуру страницы, разбивая контент на разделы и подразделы. Это как оглавление книги. 🟠Доступность Люди, использующие вспомогательные технологии (например, скринридеры), полагаются на правильные заголовки для навигации по странице. 🟠SEO Поисковые системы оценивают структуру заголовков для индексации и понимания ключевых тем страницы. 🚩Что значит "правильная иерархия заголовков"? 🟠`` Заголовок страницы (должен быть уникальным и только один на странице). 🟠`` Подразделы . 🟠`` Подразделы , и так далее. Главный заголовок страницы Раздел 1 Подраздел 1.1 Подраздел 1.2 Раздел 2 Подраздел 2.1 Подраздел 2.1.1 🚩Как проверить иерархию заголовков? 🟠Ручная проверка HTML-кода Вручную просмотрите HTML-код страницы и убедитесь, что заголовки идут в порядке. Например, → → и так далее, без "перескакивания". Избегайте "пропуска уровней" (например, от сразу к ). 🟠Использование браузерных DevTools В браузере откройте DevTools (например, в Chrome нажмите F12 или Ctrl+Shift+I). Перейдите на вкладку "Elements" (Элементы). Найдите заголовки (, и так далее) и проверьте их последовательность. 🟠Инструменты для проверки доступности Используйте расширения или инструменты для оценки доступности, такие как: 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. 🚩Примеры ошибок в структуре и как их исправить Ошибка: Пропуск уровней заголовков Главный заголовок Подраздел Исправление Главный заголовок Подраздел Ошибка: Несколько на одной странице Главный заголовок Еще один заголовок Исправление Главный заголовок Еще один заголовок Ставь 👍 и забирай 📚 Базу знаний