Семантическая вёрстка

Семантическая вёрстка – это HTML-разметка, в которой теги выбирают по смыслу содержимого, а не по внешнему виду: шапка в header, меню в nav, основной текст в main и article, заголовки в тегах h1, h2, h3, списки в ul и ol.

Две страницы могут выглядеть в браузере одинаково. Первая собрана из сотни безликих <div>, вторая размечена смысловыми тегами. Человеку с обычным экраном разницы не видно. Программе экранного доступа, поисковому роботу и браузеру в режиме чтения видно сразу: во втором случае понятно, где меню, где основной текст, а где подвал с реквизитами.

Семантические теги и каркас страницы

К семантике относятся и старые теги: заголовки, списки, таблицы для табличных данных, <strong> для действительно важного текста. Собранный из них каркас страницы услуги выглядит так:

<header>логотип, телефон</header>
<nav>главное меню</nav>
<main>
  <article>
    <h1>Монтаж пластиковых окон</h1>
    <section><h2>Цены</h2> ... </section>
    <section><h2>Гарантия</h2> ... </section>
  </article>
  <aside>похожие услуги</aside>
</main>
<footer>адрес, реквизиты</footer>

Что семантика даёт людям, роботам и разработчикам

• Доступность. Программы экранного доступа строят по тегам навигацию: человек может сразу перейти к основному содержимому или к меню. Кнопка, сделанная из <div>, часто не нажимается с клавиатуры.
• Поиск. Роботу проще отделить основной текст от повторяющегося шаблона. Списки и таблицы удобнее превращать в быстрые ответы и в ответы нейросетевого поиска.
• Режим чтения и сторонние сервисы. Браузеры, агрегаторы и мессенджеры точнее вытаскивают текст статьи.
• Поддержка. Новый разработчик быстрее разбирается в коде, где блоки названы по смыслу.

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

С микроразметкой её часто путают. Семантические теги встроены в сам HTML и описывают роль блока: это меню, это статья. Schema.org добавляет поверх отдельный словарь и описывает данные: это цена, это рейтинг, это адрес организации. Одно не заменяет другое.

Как проверить разметку и с чего начать правки

1. Прогоните страницу через валидатор W3C: он покажет ошибки вложенности и незакрытые теги.
2. Запустите Lighthouse и посмотрите раздел доступности: кнопки без названий, нарушенный порядок заголовков, неправильные списки.
3. Откройте в инструментах разработчика дерево доступности. Браузер строит его из DOM, и именно так страницу видит программа экранного доступа.
4. Быстрый тест: отключите стили. Если страница читается сверху вниз в логичном порядке, с понятными заголовками и списками, каркас в порядке.

На действующем сайте переписывать вёрстку целиком ради семантики редко оправдано. Обычно хватает правок в общих шаблонах, которые повторяются на всех страницах:

1. Шапку обернуть в header, главное меню в nav, подвал в footer.
2. Основное содержимое каждой страницы поместить в один main.
3. Проверить заголовки: один h1, разделы текста размечены h2, служебные блоки без тегов заголовков.
4. Заменить кликабельные div на button или ссылки.
5. Добавить атрибут alt картинкам с содержанием и подписи label полям форм.

Правка в шаблоне делается один раз и сразу действует на весь сайт. Поэтому семантику выгоднее закладывать при разработке или редизайне.

Что ломает семантику: div вместо кнопок и section без заголовка

• Вся страница на <div> и <span>, кнопки сделаны из блоков с обработчиком клика.
• section используется как обёртка для оформления, без заголовка внутри.
• Несколько видимых main на одной странице.
• Таблица для раскладки блоков вместо сетки на CSS.
• Ссылка без адреса для действия и кнопка для перехода на другую страницу.

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

Когда ставить article, section, strong, b и nav

Источники

• Стандарт HTML (WHATWG): разделы и группирующие элементы
• MDN Web Docs: семантические элементы HTML
• Документация Lighthouse: проверки доступности