HTML semantico significa usare elementi che descrivono il significato del loro contenuto, non solo il suo aspetto. Un <nav> dice "questa è navigazione"; un <button> dice "questo è cliccabile" — mentre un <div> non dice nulla.
Home
Home
Entrambi possono essere stilizzati in modo identico, ma solo il secondo è capito dai browser, dai lettori di schermo e dai motori di ricerca.
<header>, <nav>, <main>, <footer>, permettendo agli utenti di saltare tra le regioni. Un muro di <div> non dà loro nulla.<h1>, <article>, <main> e comprendono la struttura della pagina.<button> è focalizzabile, attivabile da tastiera (Enter/Space), e annunciato come pulsante — un <div onclick> non è nulla di tutto ciò a meno che tu non lo aggiunga tutto di nuovo a mano.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
La regola pratica: scegli l'elemento che rappresenta l'intenzione, e usa <div>/<span> solo come contenitori di stile quando nessun elemento semantico si adatta.
È il vantaggio più economico in termini di accessibilità e SEO che puoi ottenere.