Semantic HTML tarkoittaa elementtien käyttöä, jotka kuvaavat sisältönsä merkitystä, ei vain sen ulkonäköä. <nav> sanoo "tämä on navigaatio"; <button> sanoo "tämä on klikattavissa" — kun taas <div> ei sano mitään.
html
Home
Home
Semantic HTML tarkoittaa elementtien käyttöä, jotka kuvaavat sisältönsä merkitystä, ei vain sen ulkonäköä. <nav> sanoo "tämä on navigaatio"; <button> sanoo "tämä on klikattavissa" — kun taas <div> ei sano mitään.
Home
Home
Molempia voidaan muotoilla identtisesti, mutta vain toinen on ymmärretty selainten, näytönlukuohjelmien ja hakukoneiden toimesta.
<header>, <nav>, <main>, <footer> -elementeistä, mikä antaa käyttäjille mahdollisuuden hypätä alueiden välillä. <div>-seinä ei anna heille mitään.<h1>, <article>, <main> -elementeissä ja ymmärtävät sivun rakenteen.<button> on fokusioitavissa, näppäimistöllä aktivoitavissa (Enter/Space) ja ilmoitettu painikkeeksi — <div onclick> ei ole mikään näistä, ellei lisää niitä käsin takaisin.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Peukalonheitto: valitse elementti, joka tarkoittaa sitä, mitä aiot, ja käytä <div>/<span> vain tyylien säilöinä, kun mikään semanttinen elementti ei sovi.
Se on halvin saavutettavuus- ja SEO-voitto, jonka voit saavuttaa.