Что такое семантические теги (header, main, footer) и зачем они нужны?

Семантические теги — это те же блочные контейнеры, но с понятным СМЫСЛОМ: header (шапка), nav (навигация), main (основное содержимое, одно на страницу), section/article (смысловые куски), aside (сайдбар), footer (подвал). Визуально они как div, но несут информацию о роли блока.

Зачем это нужно:

• SEO — поисковики лучше понимают структуру страницы.
• Доступность — скринридеры дают перейти к main/nav, незрячим пользователям проще ориентироваться.
• Читаемость кода — <header> понятнее, чем <div class="header">.

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

На div'ах всё работает, но семантика — это про машинопонимаемость и доступность, а не про внешний вид.

Это div'ы со смыслом. Помогают SEO, доступности (скринридеры) и читаемости кода.

Для SEO и доступности.