Semantisk HTML innebär att använda element som beskriver innebörden av sitt innehål, inte bara dess utseende. En <nav> säger "detta är navigering"; en <button> säger "detta går att klicka" — medan en <div> säger ingenting.
Home
Home
Båda kan formateras identiskt, men endast den andra förstås av webbläsare, skärmläsare och sökmotorer.
<header>, <nav>, <main>, <footer>, vilket låter användare hoppa mellan områden. En vägg av <div>-element ger dem ingenting.<h1>, <article>, <main> och förstår sidstrukturen.<button> är fokuerbar, aktiverbar via tangentbord (Enter/Space) och tillkännagiven som en knapp — en <div onclick> är ingen av dessa om du inte lägger till det manuellt.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Tumregeln: välj det element som betyder det du avser, och använd endast <div>/<span> som formateringsbehållare när inget semantiskt element passar.
Det är den billigaste tillgänglighets- och SEO-vinst du kan få.