Semantic HTML σημαίνει χρήση στοιχείων που περιγράφουν την έννοια του περιεχομένου τους, όχι απλώς την εμφάνισή του. Ένα <nav> λέει "αυτό είναι πλοήγηση"; ένα <button> λέει "αυτό είναι κλικ" — ενώ ένα <div> δεν λέει τίποτα.
Home
Home
Και τα δύο μπορούν να διαμορφωθούν πανομοιότυπα, αλλά μόνο το δεύτερο είναι κατανοητό από προγράμματα περιήγησης, προγράμματα ανάγνωσης οθόνης και μηχανές αναζήτησης.
<header>, <nav>, <main>, <footer>, επιτρέποντας στους χρήστες να μεταπηδούν μεταξύ περιοχών. Ένα τοίχος από <div>s δεν τους δίνει τίποτα.<h1>, <article>, <main> και κατανοούν τη δομή της σελίδας.<button> είναι εστιάσιμο, ενεργοποιήσιμο με πληκτρολόγιο (Enter/Space) και ανακοίνωση ως κουμπί — ένα <div onclick> δεν είναι κανένα από αυτά εκτός αν το προσθέσετε ξανά με το χέρι.<header> <nav> <main> <article> <section> <aside> <footer>
<figure> <figcaption> <time> <mark> <button> <h1>–<h6>
Ο κανόνας του αντίχειρα: φτάστε στο στοιχείο που σημαίνει αυτό που προορίζεται, και χρησιμοποιήστε <div>/<span> μόνο ως περιέκτες στυλ όταν κανένα σημασιολογικό στοιχείο δεν ταιριάζει.
Είναι το φθηνότερο κέρδος προσβασιμότητας και SEO που μπορείτε να πετύχετε.