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

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

Семантические против несемантических

• Несемантические — <div>, <span>: не несут смысла, только контейнеры.
• Семантические — <header>, <nav>, <main>, <article>, <section>, <footer>, <aside>, <figure>: явно описывают назначение блока.

<header>Шапка</header>
<nav>Навигация</nav>
<main>
  <article>Статья</article>
  <aside>Сайдбар</aside>
</main>
<footer>Подвал</footer>

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

• Доступность (a11y) — скринридеры понимают структуру, ориентируются по landmark-ролям.
• SEO — поисковики лучше понимают контент.
• Читаемость кода — структура очевидна без чтения классов.
• Единообразие — стандартные роли элементов.

Семантика форм и текста

<button>, <label>, <input>, <strong>, <em> — тоже семантичны: <strong> = важность, <em> = акцент, в отличие от чисто визуальных <b>/<i>.

Коротко для собеседования

Семантика — использование тегов по смыслу (<header>, <nav>, <main>, <article>) вместо <div>. Улучшает доступность, SEO и читаемость, давая элементам понятные роли.