Для чего нужно использовать разные теги?

Продвинутые темы

Разные HTML-теги нужны, чтобы придавать контенту смысл (семантику), а не только вид — это улучшает доступность, SEO и поддерживаемость.

Зачем использовать разные теги

Семантика (смысл контента)

Тег описывает роль содержимого:

<header>Шапка</header>
<nav>Навигация</nav>
<main><article>Статья</article></main>
<footer>Подвал</footer>

Вместо <div> везде — теги с понятной ролью.

Доступность (a11y)

Скринридеры используют семантику для навигации: <button> объявляется как кнопка, <nav> — как навигация, заголовки <h1>–<h6> строят структуру.

SEO

Поисковики лучше понимают структуру и важность контента (заголовки, <article>, <main>).

Поведение из коробки

<button> — фокус, Enter/Space, роль кнопки.
<a href> — навигация, открытие в новой вкладке.
<input> — валидация, типы, клавиатура.

<div role="button"> требует ручной реализации всего этого.

Читаемость и поддержка

Код самодокументирован — структура ясна без изучения классов.

Правильный выбор тегов

Действие → <button>, навигация → <a>.
Заголовки → <h1>–<h6> по иерархии.
Списки → <ul>/<ol>, таблицы → <table>.
Нет семантики → <div>/<span>.

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

Разные теги нужны для семантики — они придают контенту смысл (<header>, <nav>, <button>, <article>), а не только вид. Это улучшает доступность (скринридеры), SEO (структура для поисковиков), даёт поведение из коробки (<button> — фокус, клавиатура) и читаемость кода. <div> — только когда нет подходящего семантического тега.