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

После этого урока вы будете понимать, что такое семантика, чем «дивная» вёрстка отличается от осмысленной и почему профессионалы всегда выбирают второе.

Что уже умеем / что добавим

Вы научились раскладывать элементы с помощью Flexbox, используя блоки div. Теперь придадим этим блокам смысл. В сквозном проекте мы начнём заменять безликие div на семантические теги, сделав структуру сайта осмысленной.

Что вы узнаете в рамках статьи

• Что такое семантика в вёрстке.
• Чем семантический тег отличается от div.
• Как семантика влияет на SEO.
• Как семантика влияет на доступность.
• Почему семантический код удобнее поддерживать.

Ключевые термины

• Семантика — смысл, который тег придаёт своему содержимому.
• Семантический тег — тег с определённой ролью (header, article, nav).
• Несемантический тег — тег без собственного смысла (div, span).
• SEO — оптимизация страницы для поисковых систем.
• Доступность (a11y) — пригодность страницы для людей с ограничениями.
• Скринридер — программа, озвучивающая содержимое страницы.

Что такое семантика

Семантика — это про смысл. Семантический тег не просто ограничивает кусок страницы, а сообщает, чем этот кусок является. Сравните два варианта одной шапки:

<!-- Без семантики -->
<div class="header">...</div>

<!-- С семантикой -->
<header>...</header>

Внешне и с одинаковыми стилями они выглядят абсолютно одинаково. Но во втором случае тег header прямо говорит: «это шапка страницы». Эту информацию считывают браузеры, поисковые роботы и вспомогательные технологии. Первый же вариант — просто «какой-то блок с классом», и его роль понятна только автору кода.

Семантический тег против div

Тег div (как и строчный span) — несемантический: он не несёт смысла и служит лишь контейнером для группировки и стилизации. Это не плохо — div незаменим там, где нужна чисто техническая обёртка. Проблема начинается, когда из div собирают вообще всё, включая шапку, меню и статьи.

<div class="nav">
  <a href="#">Главная</a>
</div>

<nav>
  <a href="#">Главная</a>
</nav>

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

Семантика и SEO

Поисковые системы стремятся понять структуру и смысл страницы, чтобы правильно её ранжировать. Семантические теги дают им подсказки: где главный контент (main), где отдельная статья (article), где второстепенная информация (aside). Страница из осмысленных тегов «читается» роботом лучше, чем однородная масса div.

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

Семантика и доступность

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

Если же вся страница состоит из div, скринридеру не за что зацепиться — он не отличит меню от статьи, и пользователю приходится продираться через всё подряд. Семантика делает сайт доступным для всех, а во многих странах доступность ещё и требование закона. Это одна из главных причин верстать осмысленно.

Применяем в проекте

Начнём осмысливать структуру сайта. Заменим внешние контейнеры-div на семантические теги: шапку — на header, а основное содержимое обернём в main. Внутренние блоки пока оставим как есть — детально разметим их на следующем уроке.

<header class="header">
  <div class="logo">Моя компания</div>
  <nav class="nav">
    <a href="#">Главная</a>
    <a href="#">Услуги</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</header>

<main>
  <section class="services">
    <div class="card">Веб-разработка</div>
    <div class="card">Дизайн</div>
  </section>
</main>

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

Частые ошибки

• Всё из div.
  Если есть подходящий семантический тег, используйте его вместо универсального div.
• Семантика ради вида.
  Теги выбирают по смыслу содержимого, а не потому, что «так красивее»; внешний вид задаёт CSS.
• Отказ от div совсем.
  div по-прежнему нужен как техническая обёртка там, где осмысленного тега нет.
• Мнение, что семантика не важна.
  Она влияет на SEO, доступность и читаемость — это не мелочь.

Итоги

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

Прекрасное начало раздела! В следующем уроке мы разберём конкретные структурные теги — header, nav, main, section, article, aside, footer — и разметим ими всю страницу.