HTML semântico significa usar elementos que descrevem o significado do seu conteúdo, não apenas sua aparência. Uma tag <nav> diz "isto é navegação"; uma tag <button> diz "isto é clicável" — enquanto uma <div> não diz nada.
Home
Home
Ambas podem ser estilizadas de forma idêntica, mas apenas a segunda é compreendida por navegadores, leitores de tela e mecanismos de busca.
<header>, <nav>, <main>, <footer>, permitindo que usuários pulem entre regiões. Uma parede de <div>s não oferece nada.<h1>, <article>, <main> e entendem a estrutura da página.<button> é focável, ativável por teclado (Enter/Space) e anunciado como botão — um <div onclick> não é nenhum destes a menos que você re-adicione tudo manualmente.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
A regra de ouro: escolha o elemento que significa o que você pretende, e use apenas <div>/<span> como contêineres de estilo quando nenhum elemento semântico se encaixa.
É a vitória mais barata em acessibilidade e SEO que você pode obter.