Зачем нужна семантика?

В одном из прошлых постов я разобрал что такое семантика. В этом посте хочу рассказать зачем она нужна.

Чаще всего о семантике говорят со стороны SEO, и не зря:

1. Оптимизация для поисковых ботов

Поисковые роботы, прежде чем добавить ваш сайт в выдачу, открывают вашу страницу и прогружают весь её контент. Чем лучше свёрстана страница, тем больше “баллов” она наберёт — лучше определится категория контента, его содержимое, ключевые запросы. Чем больший рейтинг набирает страница, тем вероятнее она появится в выдаче при поиске. А посещения почти всегда конвертируются в доход.

2. Повышение доступности

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

Скринридер — это специальная программа, которая озвучивает всё, что происходит на экране и чаще всего используется незрячими пользователями.

Пример работы скринридера в видео

Так вот, скринридеры завязываются как раз на эти самые семантические теги и семантические атрибуты типа alt у тега image.

При этом, доступность — это не только про незрячих, это и про самых обычных людей. Вот используете вы беспроводную мышку и она неожиданно села. Как пользоваться компьютером и сайтами в частности? Конечно же с клавиатуры. Семантика в этом также помогает.

3. Множество предустановок

Есть категория семантичных тегов, которые имеют дополнительные свойства "из коробки", типа тега <button>. Использовать такой тег в разы удобнее, чем сделать кнопку из тега <div>

4. Улучшение читаемости кода

Лично для меня это минорно, особенно в эпоху господства компонентного подхода. Но, всё таки, семантические теги позволяют разработчикам быстрее разбираться в вёрстке, это тоже немаловажно

Также советую доклад Вадима Макеева на тему семантики. Вадим — амбассадор доступности, у него шикарные материалы на эту тему.