I vantaggi dell’HTML semantico nello sviluppo web
Al giorno d’oggi, chi aspira a diventare sviluppatore web deve studiare un numero sempre maggiore di tecnologie. Grazie alle librerie di componenti che offrono elementi pronti all’uso e all’illusione che corsi della durata di pochi mesi siano sufficienti per trasformare chiunque in un programmatore, la conoscenza dell’HTML da parte del programmatore medio rimane superficiale.
Se leggendo queste righe ti senti in colpa, inizia subito a studiare: dev/dom.html
Che cos’è l’HTML semantico?
L’HTML semantico si riferisce all’uso di elementi HTML che conferiscono significato e struttura al contenuto di una pagina web. Anziché utilizzare elementi generici o div privi di una semantica chiara, è opportuno ricorrere a elementi specifici che riflettano il significato del contenuto.
L’uso dell’HTML semantico offre diversi vantaggi. Innanzitutto, migliora l’accessibilità dei siti web per le persone con disabilità attraverso strumenti di assistenza come gli screen reader, poiché fornisce informazioni chiare sulla struttura dei documenti. Aiuta inoltre i motori di ricerca a comprendere meglio il contenuto della pagina, facilitando l’indicizzazione e il posizionamento nei risultati di ricerca.
Ecco alcuni esempi di elementi HTML semantici:
<header> | rappresenta l’intestazione di una pagina o di una sezione. |
<nav> | rappresenta una sezione di navigazione. |
<main> | rappresenta il contenuto principale di una pagina. |
<article> | rappresenta un articolo all’interno di una pagina. |
<section> | rappresenta una sezione logica o tematica di una pagina. |
<aside> | rappresenta contenuti aggiuntivi rispetto al contenuto della pagina |
<footer> | rappresenta il piè di pagina di una pagina o di una sezione. |
<abbr> | Abbreviazione |
<acronym> | Acronimo |
<blockquote> | Citazione estesa |
<dfn> | Definizione |
<address> | Indirizzo dell’autore o degli autori del documento |
<cite> | Riferimento bibliografico |
<button> | Pulsante |
<code> | Riferimento al codice |
<tt> | Testo teletipo |
<del> | Testo eliminato |
<ins> | Testo inserito |
<em> | Enfasi |
<strong> | Enfasi forte |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> | Titolo di primo livello, Titolo di secondo livello, Titolo di terzo livello, Titolo di quarto livello, Titolo di quinto livello, Titolo di sesto livello |
<hr> | Interruzione tematica |
<kbd> | Testo da inserire dall’utente |
<pre> | Testo preformattato |
<q> | Breve citazione in linea |
<samp> | Esempio di output |
<sub> | Indice |
<sup> | Apice |
<var> | Testo variabile o definito dall’utente |
Un aspetto importante dell’HTML semantico riguarda l’uso corretto degli attributi. Ad esempio, l’ alt attributo dovrebbe essere utilizzato per fornire un testo alternativo alle immagini, consentendo alle persone con disabilità visive di comprendere i contenuti visivi. Analogamente, l’ label dovrebbe essere utilizzato per associare etichette esplicite agli elementi di input nei moduli, migliorando l’usabilità per gli utenti con disabilità cognitive o motorie.
Perché utilizzare l’HTML semantico?
Abbiamo già visto alcuni vantaggi dell’HTML semantico, ma vale la pena ripeterli:
- Accessibilità: l’HTML semantico è alla base dell’accessibilità del web e migliora notevolmente l’esperienza degli utenti che navigano sul web con tecnologie assistive. Questo perché gli screen reader e i browser sono in grado di interpretare meglio il codice. Consiglio questo eccellente articolo: docs/Learn/Accessibility/HTML
- SEO: Migliora la SEO del sito web, ovvero l’ottimizzazione per i motori di ricerca (Search Engine Optimization), che consiste nel processo volto ad aumentare il numero di persone che visitano la tua pagina web. Con una SEO migliore, i motori di ricerca sono in grado di identificare meglio i contenuti del tuo sito web e di dare il giusto peso a quelli più importanti. Un’ulteriore risorsa importante è disponibile a questo link: schema.org
- Facile da comprendere: l’HTML semantico rende inoltre il codice sorgente del sito web più leggibile per gli altri sviluppatori web. Puoi trovare una risorsa più pratica qui: guides/semantic-html
Come posso iniziare a scrivere un markup migliore?
È un’ottima domanda; il mio consiglio è di prendere il tuo markup e divertirti a rifattorizzarlo. Correggendo il markup man mano che procedi, scrivere un markup migliore diventerà sempre più naturale.
Come faccio a sapere se il mio codice è scritto bene?
Pensi di aver migliorato tutto ciò che era migliorabile? Questa specifica checklist può aiutarti a rispondere a questa domanda: topics/html-semantics-checklist