Какие знаешь техники семантической верстки?

Техники семантической верстки: от базовых принципов до продвинутых практик

Семантическая верстка — это подход к созданию HTML-разметки, при котором выбор тегов определяется смысловым содержанием контента, а не только его внешним видом. Это фундамент для доступности (a11y), SEO-оптимизации и поддерживаемости кода. Вот ключевые техники, которые я применяю в работе.

1. Использование HTML5 семантических тегов вместо универсальных div

Основная техника — замена бессмысленных <div> и <span> на теги с предопределенной смысловой нагрузкой. Это создает информационную иерархию для браузеров, скринридеров и поисковых роботов.

<!-- Плохо: "Дивная каша" -->
<div id="header">
  <div class="nav">...</div>
</div>
<div id="main">
  <div class="article">...</div>
</div>
<div id="footer">...</div>

<!-- Хорошо: Семантичная структура -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

Ключевые семантические теги HTML5:

• <header> / <footer> — шапка и подвал всего документа или отдельной секции.
• <nav> — блок навигации (главное меню, оглавление).
• <main> — основное, уникальное содержимое страницы. Должен быть один на страницу.
• <article> — независимый, самодостаточный контент (пост в блоге, новость, карточка товара).
• <section> — тематическая группировка контента, обычно с заголовком.
• <aside> — косвенно связанный контент (сайдбар, цитата, рекламный блок).
• <figure> / <figcaption> — самостоятельный медиаобъект (изображение, диаграмма) с подписью.

2. Иерархия заголовков (Outline Algorithm)

Логическая и последовательная структура заголовков от <h1> до <h6> — краеугольный камень семантики. <h1> должен быть один на страницу и отражать ее главную тему. Заголовки более низких уровней вкладываются в вышестоящие, создавая четкий документный контур.

<h1>Название блога о фронтенде</h1>
<section>
  <h2>Последние статьи</h2>
  <article>
    <h3>Введение в семантическую верстку</h3>
    <p>...</p>
    <h4>Зачем это нужно?</h4>
    <p>...</p>
  </article>
</section>

3. Семантическая разметка форм и интерактивных элементов

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

• <label> с атрибутом for: Программная привязка текстовой метки к элементу формы.
• <fieldset> и <legend>: Группировка логически связанных полей (например, выбор способа оплаты).
• <output>: Для вывода результата вычислений.
• Семантичные <input> types: email, tel, search, number — обеспечивают валидацию и специальные клавиатуры на мобильных устройствах.

<form>
  <fieldset>
    <legend>Контактная информация</legend>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

4. Теги для текстового контента

Многие теги для текста несут скрытый семантический смысл:

• <strong> — важность, серьезность, срочность (аналог <b> по смыслу, а не по виду).
• <em> — смысловое выделение, акцент (аналог <i>).
• <blockquote> / <cite> — для длинных цитат и указания источника.
• <time> с атрибутом datetime — машиночитаемое представление даты и времени.
• <mark> — выделение фрагмента текста в справочных целях.
• <code>, <pre>, <kbd>, <samp> — для разметки кода, ввода с клавиатуры и вывода программы.

5. Расширенные семантические атрибуты (WAI-ARIA)

Когда нативной HTML-семантики недостаточно (особенно в сложных SPA), на помощь приходит ARIA (Accessible Rich Internet Applications).

• Роли (role) — определяют тип элемента (role="navigation", role="alert", role="dialog"). Важно: используйте нативные теги (<nav>, <dialog>), если они доступны.
• Свойства (aria-*):

    *   `aria-label`, `aria-labelledby`, `aria-describedby` — для предоставления доступного имени и описания.
    *   `aria-hidden="true"` — скрыть декоративный элемент от скринридеров.
    *   `aria-live` — объявить область динамически обновляемого контента (уведомления).
    *   `aria-expanded`, `aria-current` — описать состояние интерактивных элементов.

<!-- Прогресс-бар, где нативного тега нет -->
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  Загружено 70%
</div>

<!-- Декоративная иконка, скрытая от скринридера -->
<span class="icon" aria-hidden="true">★</span>
<span class="sr-only">Рейтинг: 5 звезд</span>

6. Микроразметка (Schema.org)

Это техника для структурирования данных на странице с помощью специальных атрибутов (itemscope, itemtype, itemprop). Поисковые системы (Google, Яндекс) используют эту разметку для создания расширенных сниппетов в результатах поиска (рейтинг, цена, калорийность рецепта, дата события).

<div itemscope itemtype="https://schema.org/Recipe">
  <h1 itemprop="name">Блины на молоке</h1>
  <img itemprop="image" src="blini.jpg" alt="Блины">
  <span itemprop="author">Иван Иванов</span>
  <span itemprop="calories">250 kcal</span>
  <div itemprop="recipeInstructions">Инструкция по приготовлению...</div>
</div>

Практический подход и проверка

Я всегда придерживаюсь принципа: "Сначала нативный HTML, потом ARIA". В процессе работы использую:

1. Валидаторы (W3C Markup Validator) для проверки синтаксиса.
2. Инструменты доступности в DevTools (Lighthouse, Accessibility panel).
3. Тестирование с помощью скринридеров (NVDA, VoiceOver) и навигации только с клавиатуры (Tab/Shift+Tab).

Семантическая верстка — это не просто следование правилам, а создание инклюзивного, понятного и технологически грамотного веб-пространства, которое одинаково хорошо работает для всех пользователей и систем.