HTML semantico: perché è così importante?
Alcuni elementi HTML sono detti semantici perché:
- Hanno proprietà intrinseche automatiche (come il :focus per <a> e <button>);
- Sono quindi più facili da sviluppare: evitano di aggiungere funzioni già presenti;
- Comunicano con i motore di ricerca, quindi hanno valenza SEO;
- Sono utili per navigare con sola tastiera, per <a> e <button>;
- Inoltre comunicano con gli Screen Reader, facilitando la navigazione.
- Maggiori informazioni nel primo commento.
1. Div + Span
Sono elementi non semantici dell’HTML. Dovrebbero servire solo come mattoni. Spesso sono usati per la struttura portante del layout.
2. Semantic tags
Sono elementi utili per strutturare il layout e le parti attivabili, ad esempio:
- nav: gruppi di link utili per la navigazione (rilevati anche con Screen Reader);
- header: intestazione della pagina e di altre sezioni article;
- footer: chiusura della pagina e di altre sezioni article;
- aside: parte accessoria della pagina e di altre sezioni;
- H1 – H6: titoli rilevabili dagli Screen Reader;
- figure + figcaption: per avere la didascalia associata alla foto.