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

Разбираемся, какую конкретную пользу приносит семантика — и почему это не «для галочки».

Семантика — это про смысл разметки. Один и тот же вид можно получить из <div>, но смысл теряется.

Один и тот же вид — разный смысл

Внешне страница на голых <div> и страница на семантических тегах могут выглядеть одинаково. Но для машин разница огромная. Сравните:

<div class="top">...</div>
<div class="menu">...</div>
<div class="content">...</div>

Здесь имена классов придумал разработчик — машина их не понимает. А вот семантический вариант:

<header>...</header>
<nav>...</nav>
<main>...</main>

Имена тегов стандартны — их понимает любой браузер, поисковик и вспомогательная программа.

Польза 1: доступность

Незрячие пользователи работают через программы чтения с экрана. Такая программа умеет перемещаться по семантическим областям: «перейти к навигации», «перейти к основному содержимому», пропустить меню. Если вместо <nav> и <main> стоят безликие <div>, эти удобные переходы недоступны, и пользователю приходится продираться через всю страницу.

Польза 2: SEO

Поисковые системы (Google, Яндекс) анализируют структуру страницы, чтобы понять, что на ней главное. Семантические теги подсказывают: вот основной контент в <main>, вот заголовок статьи, а вот второстепенная врезка в <aside>. Это помогает странице правильно ранжироваться в поиске.

Польза 3: читаемость кода

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

Правило выбора

Простое правило: если для блока есть подходящий семантический тег — используйте его. <div> берите только тогда, когда блок не несёт особого смысла и нужен лишь как обёртка для оформления.

Маленькое усилие — большая отдача

Замечательное в семантике то, что она почти ничего не стоит. Вам не нужно писать больше кода или учить новый синтаксис — достаточно вместо безликого <div class="header"> написать <header>. Одно и то же количество усилий, но во втором случае вы бесплатно получаете лучшую доступность, плюс к SEO и более чистый код.

Именно поэтому семантику считают признаком грамотного разработчика. На собеседованиях часто показывают кусок вёрстки из сплошных <div> и спрашивают, что улучшить, — и правильный ответ начинается с семантических тегов. Привыкайте писать осмысленно с самого начала: переучиваться потом сложнее, чем сразу делать хорошо. Это та привычка, которая отличает аккуратный код от «лишь бы работало».

Итог

• Семантика добавляет коду смысл, который понимают браузеры, поисковики и программы доступности.
• Она улучшает доступность для незрячих, помогает SEO и делает код читаемым.
• Используйте подходящий семантический тег, а <div> — только как нейтральную обёртку.