Почти все в веб сообществе согласны, что семантика в HTML это хорошо, это полезно, но когда начинаешь копать глубже, только очень небольшое количество людей действительно понимает почему.
Семантика байт кода нужна для машинной обработки. На данный момент HTML семантика в веб нужна двум типам программ: поисковым роботам и альтернативным устройствам (речевые браузеры, тактильные дисплеи Брайля, принтеры Брайля).
Видов семантики много, но интересных нам всего три:
Текстовая семантика нужна поисковикам и альтернативным устройствам.
Не нужна поисковикам.
Прочитывается речевыми браузерами, но при этом есть нюанс со списками, списки с отключенными буллитами list-style:none речевые браузеры игнорируют, то есть использование dl,dt,dd,ul,ol,li вне области контента бесполезно т.к. поисковым роботам и речевым браузерам эти конструкции не интересны.
HTML5 семантика на данный момент не поддерживается поисковиками.
Прочитывается речевыми браузерами, если ваша страница размечена структурными HTML5 тегами с использованием атрибута role="", людям которые используют речевые браузеры это значительно упростит работу с вашим сайтом.
Все должно иметь какую-нибудь цель, в том числе семантическая разметка, не нужно создавать семантику на странице просто так, или потому что кто-то сказал что HTML5 семантика это круто, семантика в HTML используется для решения определенного круга задач и каждый семантический тег на странице должен быть оправдан.
Например, если мы хотим увеличить доступность сайта для речевых браузеров, дисплеев Брайля или принтеров Брайля, мы тестируем в них нашу верстку и находим оптимальный вариант использования HTML семантики вместе с другими методами, но не в коем случае слепо не добавляем семантическую разметку в документ.
Либо, если нам нужно оптимизировать сайт под поисковик, мы отдаем верстку сеошнику и он создает семантику документа которая будет полезна для поисковиков.
Сейчас есть очень хороший подход, сначала создавать семантически нейтральную страницу, используя элементы не имеющие семантического значения div/span, затем при необходимости можно поменять эти нейтральные конструкции на то что нужно поисковикам, речевым браузерам, принтерам Брайля, новым айфончикам будь то h1, h2, h3, h4, h5, h6, section, figure, details, nav, article, strong, em, и т.д.
Тем самым мы делаем нашу работу по шагам и уже тестируя верстку под эти устройства, мы точно знаем какой семантический тег, в каком месте и для какой цели был туда поставлен.
И в таком случае ответ на вопрос: “Правильно ли я сделал, что использовал здесь этот тег?“ — будет совершенно однозначный.
Для чего нужна семантика?
Семантика байт кода нужна для машинной обработки. На данный момент HTML семантика в веб нужна двум типам программ: поисковым роботам и альтернативным устройствам (речевые браузеры, тактильные дисплеи Брайля, принтеры Брайля).
Какие виды HTML семантики существуют?
Видов семантики много, но интересных нам всего три:
Поддержка
Текстовая семантика
Текстовая семантика нужна поисковикам и альтернативным устройствам.
Семантика группировки содержания
Не нужна поисковикам.
Прочитывается речевыми браузерами, но при этом есть нюанс со списками, списки с отключенными буллитами list-style:none речевые браузеры игнорируют, то есть использование dl,dt,dd,ul,ol,li вне области контента бесполезно т.к. поисковым роботам и речевым браузерам эти конструкции не интересны.
Структурная HTML5 семантика
HTML5 семантика на данный момент не поддерживается поисковиками.
Прочитывается речевыми браузерами, если ваша страница размечена структурными HTML5 тегами с использованием атрибута role="", людям которые используют речевые браузеры это значительно упростит работу с вашим сайтом.
Главное — цель
Все должно иметь какую-нибудь цель, в том числе семантическая разметка, не нужно создавать семантику на странице просто так, или потому что кто-то сказал что HTML5 семантика это круто, семантика в HTML используется для решения определенного круга задач и каждый семантический тег на странице должен быть оправдан.
Например, если мы хотим увеличить доступность сайта для речевых браузеров, дисплеев Брайля или принтеров Брайля, мы тестируем в них нашу верстку и находим оптимальный вариант использования HTML семантики вместе с другими методами, но не в коем случае слепо не добавляем семантическую разметку в документ.
Либо, если нам нужно оптимизировать сайт под поисковик, мы отдаем верстку сеошнику и он создает семантику документа которая будет полезна для поисковиков.
Нейтральный подход
Сейчас есть очень хороший подход, сначала создавать семантически нейтральную страницу, используя элементы не имеющие семантического значения div/span, затем при необходимости можно поменять эти нейтральные конструкции на то что нужно поисковикам, речевым браузерам, принтерам Брайля, новым айфончикам будь то h1, h2, h3, h4, h5, h6, section, figure, details, nav, article, strong, em, и т.д.
Тем самым мы делаем нашу работу по шагам и уже тестируя верстку под эти устройства, мы точно знаем какой семантический тег, в каком месте и для какой цели был туда поставлен.
И в таком случае ответ на вопрос: “Правильно ли я сделал, что использовал здесь этот тег?“ — будет совершенно однозначный.