Semantic HTML significa usar elementos que describan el significado de su contenido, no solo su apariencia. Una <nav> dice "esto es navegación"; un <button> dice "esto es clickeable" — mientras que un <div> no dice nada.
Home
Home
Ambos pueden estilizarse de manera idéntica, pero solo el segundo es entendido por navegadores, lectores de pantalla y motores de búsqueda.
<header>, <nav>, <main>, <footer>, permitiendo a los usuarios saltar entre regiones. Un muro de <div>s no les da nada.<h1>, <article>, <main> y entienden la estructura de la página.<button> es enfocable, activable por teclado (Enter/Space) y anunciado como botón — un <div onclick> no es nada de esto a menos que lo re-agregues todo a mano.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Regla de oro: elige el elemento que significa lo que intentas, y usa <div>/<span> solo como contenedores de estilo cuando ningún elemento semántico sea apropiado.
Es la victoria de accesibilidad y SEO más barata que puedes conseguir.