Модули
Модуль добавляет поддержку семантических HTML5 тегов в Вашем интернет-магазине.
Семантическая вёрстка — подход к разметке, который опирается не только на содержание сайта, а и на смысловое предназначение каждого блока и логическую структуру документа.
Для чего это нужно:
- Чтобы сделать сайт доступным. Зрячие пользователи могут без проблем с первого взгляда понять, где какая часть страницы находится — где заголовок, списки или изображения. Для незрячих или частично незрячих всё сложнее. Основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух. Этот инструмент "зачитывает" содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь. Таким образом семантическая разметка помогает большему количеству пользователей взаимодействовать с вашим сайтом. Например, наличие заголовков помогает незрячим в навигации по странице. У скринридеров есть функция навигации по заголовкам, что ускоряет знакомство с информацией на сайте.
- Чтобы сайт был выше в поисковиках. Компании, которые создают поисковики, не разглашают правила ранжирования, но известно, что наличие семантической разметки страниц помогает поисковым ботам лучше понимать, что находится на странице, и в зависимости от этого ранжировать сайты в поисковой выдаче.
- Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа
<div id="nav">
для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо<div>
и<span>
. В спецификации для каждого семантического элемента описана его роль.
Модуль поддерживает следующие теги:
<header>
— Шапка сайта.<main>
— Основной контент сайта.<footer>
— Подвал сайта.<nav>
— Навигационный раздел со ссылками на другие страницы или другие части страниц (меню сайта).<section>
— Смысловой раздел документа. Неотделяемый, в отличие от<article>
.<article>
— Независимая, отделяемая смысловая единица, например блок товаров, промо-акций, карусель новостей и т.д.<aside>
— Побочный, косвенный для страницы контент (часто используют как "боковую панель" сайта).<hgroup>
— Группа заголовков.