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

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

Основные семантические теги

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

<article>
  <header><h2>Заголовок</h2></header>
  <section>Текст</section>
  <footer>Автор</footer>
</article>

Несемантические (для сравнения)

<div> и <span> — контейнеры без смысла, используются, когда подходящего семантического тега нет.

Зачем нужны

• Доступность — скринридеры используют роли для навигации.
• SEO — поисковики понимают структуру.
• Читаемость — код самодокументирован.

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

Семантические теги (<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) описывают роль контента, а не вид. Улучшают доступность, SEO и читаемость. <div>/<span> — когда семантического тега нет.