Что такое семантические теги header, nav, main, footer и зачем они, если есть div?

Визуально разницы и правда нет — внешний вид всё равно задаёт CSS. Но эти теги несут смысл, и в этом вся польза:

• <header> — шапка (логотип, название сайта),
• <nav> — блок навигации (меню со ссылками),
• <main> — основное содержимое страницы (оно одно),
• <footer> — подвал (копирайт, контакты).

<header>Мой сайт</header>
<nav>
  <a href="/">Главная</a>
  <a href="/about">О нас</a>
</nav>
<main>
  <h1>Добро пожаловать</h1>
</main>
<footer>© 2026</footer>

Зачем: поисковики лучше понимают структуру (это +к SEO), а программы для незрячих позволяют сразу перейти к «основному содержимому» или «навигации». С двадцатью одинаковыми div'ами так нельзя. Грубо говоря, <div id="header"> и <header> для тебя одно, а для машины второе — понятнее.