A szemantikus HTML azt jelenti, hogy olyan elemeket használunk, amelyek a tartalmuk jelentését írják le, nem csak a megjelenésüket. A <nav> azt mondja "ez a navigáció"; a <button> azt mondja "ez kattintható" — míg a <div> nem mond semmit.
Home
Home
Mindkettő azonosan stílusozható, de csak a második érthető böngészők, képernyőolvasók és keresőmotorok számára.
<header>, <nav>, <main>, <footer> elemekből landmarks térképét építik fel, így a felhasználók régiók között ugorhatnak. A <div>-ek fala nem ad nekik semmit.<h1>, <article>, <main> tartalmat súlyozzák és megértik az oldal szerkezetét.<button> fókuszálható, billentyűzetről aktiválható (Enter/Space), és gombként jelenik meg — a <div onclick> nem rendelkezik ezek közül egyikkel sem, hacsak nem adod hozzá mindegyiket manuálisan.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
A főszabály: válassz az elemet, amely azt jelenti, amit szándékozol, és csak akkor használj <div>/<span>-t stílusktárolóként, ha egyetlen szemantikus elem sem illik.
Ez a legolcsóbb hozzáférhetőségi és SEO-nyereség, amit elérhetsz.