В чём разница между семантическими и несемантическими HTML-тегами и зачем нужна семантика?

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

Семантические HTML-теги несут смысловую нагрузку: они описывают, что находится внутри (например, <header> — шапка, <footer> — подвал, <article> — самостоятельная статья). Несемантические теги, такие как <div> и <span>, не сообщают ничего о содержимом — они лишь группируют элементы для стилизации или скриптов.

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

Семантическая разметка делает код понятнее для разработчиков, улучшает доступность для людей с ограниченными возможностями (скринридеры озвучивают структуру страницы) и помогает поисковым системам правильно индексировать контент. Например, поисковик понимает, что <nav> — это навигация, а <main> — основной контент.

Примеры использования

<!-- Несемантическая разметка -->
<div class="header">Логотип</div>
<div class="content">Текст статьи</div>

<!-- Семантическая разметка -->
<header>Логотип</header>
<main>
  <article>Текст статьи</article>
</main>

В первом случае браузер и скринридер не знают, что это шапка или контент. Во втором — структура очевидна.

Вывод

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