Семантический HTML — это использование элементов, которые описывают значение их содержимого, а не только его внешний вид. <nav> говорит «это навигация»; <button> говорит «это интерактивный элемент» — тогда как <div> ничего не говорит.
Home
Home
Оба элемента можно стилизовать одинаково, но только второй понимается браузерами, программами для чтения с экрана и поисковыми системами.
<header>, <nav>, <main>, <footer>, позволяя пользователям переходить между регионами. Стена из <div>-ов не дает им ничего.<h1>, <article>, <main> и понимают структуру страницы.<button> доступен при навигации по Tab, активируется с помощью Enter/Space и объявляется как кнопка — <div onclick> этого не делает, если вы не добавите всё это вручную.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Правило большого пальца: выбирайте элемент, который соответствует вашему намерению, и используйте <div>/<span> только как контейнеры стилизации, когда не подходит никакой семантический элемент.
Это самый дешёвый выигрыш в доступности и SEO, который вы можете получить.