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

↑ 1.2 HTML · → Следующая

Желательно~3 мин чтенияУровень: junior

Зачем это на собесе

Семантика — основа доступности, SEO и поддерживаемой вёрстки. Вопрос «зачем не div на всё?» задают часто.

Объяснение

Семантические теги описывают смысл содержимого, а не вид.

Тег	Назначение
header, footer	шапка/подвал страницы или секции
nav	основная навигация
main	основное содержимое (один на страницу)
article	самостоятельный блок (пост, карточка новости)
section	тематическая секция с заголовком
aside	второстепенное (сайдбар, врезка)
h1–h6	иерархия заголовков (один h1, без пропусков уровней)
figure / figcaption	иллюстрация с подписью
time, address, mark, abbr	смысловые вставки
ul/ol/li, dl, table	списки и таблицы (не для вёрстки)
button, a	действие и переход

<body>
  <header><nav aria-label="Основная"><a href="/">Главная</a></nav></header>
  <main>
    <article>
      <h1>Заголовок</h1>
      <p>Опубликовано <time datetime="2025-06-12">12 июня 2025</time></p>
    </article>
    <aside>Связанные материалы</aside>
  </main>
  <footer>© 2025</footer>
</body>

Выгоды: экранные читалки понимают структуру (landmarks), поисковики извлекают смысл, меньше CSS-классов, работает встроенное поведение (клавиатура, фокус).

Нюансы и подводные камни

• div с onclick вместо button не фокусируется и не активируется клавишей — потеря доступности.
• <a> без href — не ссылка; переходы — a, действия — button.
• Пропуски уровней заголовков (h1 → h4) ломают навигацию по структуре.
• section без заголовка — бессмысленный div.
• Таблицы для раскладки — устаревший подход.

Практика

1. Перевёрстайте страницу на div в семантическую разметку.
2. Проверьте структуру заголовков расширением/DevTools Accessibility.
3. Найдите в проекте div-кнопки и замените на button.

Вопросы с ответами

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

Доступность, SEO, читаемость кода и встроенное поведение элементов.

Чем article отличается от section?

article — самодостаточный фрагмент, который имеет смысл отдельно; section — тематический раздел внутри страницы.

Сколько h1 на странице?

Как правило один — главный заголовок страницы.

Связанные темы

• Что происходит при вводе URL
• Формы и валидация