Semantic HTML betyder at bruge elementer, der beskriver betydningen af deres indhold, ikke bare dets udseende. <nav> siger "dette er navigation"; <button> siger "dette kan klikkes" — hvorimod <div> siger ingenting.
Home
Home
Begge kan styles identisk, men kun det andet bliver forstået af browsere, skærmlæsere og søgemaskiner.
<header>, <nav>, <main>, <footer>, så brugerne kan springe mellem regioner. En væg af <div>s giver dem ingenting.<h1>, <article>, <main> og forstår sidestruktur.<button> er fokusérbar, tastaturaktiveringbar (Enter/Space) og annonceret som en knap — en <div onclick> er ingen af dele, medmindre du tilføjer alt igen for hånd.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Tommelfingerregel: grib efter det element, som betyder det, du har til hensigt, og brug kun <div>/<span> som stylecontainere, når intet semantisk element passer.
Det er den billigste tilgængeligheds- og SEO-sejr, du kan opnå.