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

Тег со смыслом

Семантическая разметка описывает роль контента, а не только внешний вид: header, nav, main, article, section, aside, footer, figure, time, button и т.д.

<main>
  <article>
    <h1>Заголовок</h1>
    <p>...</p>
  </article>
</main>

Зачем

Доступность (landmarks для скринридеров), SEO, читаемость кода, меньше «div soup». Семантика ≠ «больше тегов»: выбирайте точный смысл.