Что такое семантическая верстка?

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

Что это значит

Вместо повсеместных <div> используют теги, описывающие роль контента:

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>Заголовок</h1>
    <section>...</section>
  </article>
  <aside>...</aside>
</main>
<footer>...</footer>

Семантические теги

<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <time>, <mark> и текстовые <strong>, <em>.

Зачем нужна

• Доступность — скринридеры используют landmark-роли для навигации.
• SEO — поисковики лучше понимают структуру и важность контента.
• Поддерживаемость — код читается без изучения классов.
• Единый стандарт — предсказуемая структура.

Правила

• Один <main> на страницу.
• Правильная иерархия заголовков <h1>–<h6>.
• <button> для действий, <a> для навигации.
• <div>/<span> — только когда нет подходящего семантического тега.

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

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