HTML semantico

Con oltre 100 elementi HTML e la possibilità di creare elementi personalizzati, ci sono infiniti modi per eseguire il markup dei contenuti, ma alcuni, in particolare semanticamente, sono migliori di altri.

Semantico significa "in relazione al significato". Scrivere HTML semantico significa usare elementi HTML per strutturare i contenuti in base al significato di ogni elemento, non al suo aspetto.

In questa serie non sono ancora stati trattati molti elementi HTML ma, anche senza conoscere il linguaggio HTML, i seguenti due snippet di codice mostrano come il markup semantico possa fornire un contesto ai contenuti. Entrambi usano un conteggio delle parole invece di ipsum lorem per evitare di dover scorrere i contenuti. Usa l'immaginazione per espandere "trenta parole" in 30 parole:

Il primo snippet di codice utilizza <div> e <span>, due elementi senza valore semantico.

<div>
  <span>Three words</span>
  <div>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>
<div>
  <div>
    <div>five words</div>
  </div>
  <div>
    <div>three words</div>
    <div>forty-six words</div>
    <div>forty-four words</div>
  </div>
  <div>
    <div>seven words</h2>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Hai un'idea del significato di queste parole? In effetti, no.

Riscriviamo questo codice con elementi semantici:

<header>
  <h1>Three words</h1>
  <nav>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </nav>
</header>
<main>
  <header>
    <h1>five words</h1>
  </header>
  <section>
    <h2>three words</h2>
    <p>forty-six words</p>
    <p>forty-four words</p>
  </section>
  <section>
    <h2>seven words</h2>
    <p>sixty-eight words</p>
    <p>forty-four words</p>
  </section>
</main>
<footer>
  <p>five words</p>
</footer>

Quale blocco di codice trasmette il significato? Se utilizzi solo gli elementi non semantici di <div> e <span>, non puoi capire cosa rappresentano i contenuti nel primo blocco di codice. Il secondo esempio di codice, con elementi semantici, fornisce un contesto sufficiente affinché un non programmatore possa decifrarne lo scopo e il significato, senza aver mai incontrato un tag HTML. Sicuramente fornisce un contesto sufficiente affinché lo sviluppatore possa comprenderne la struttura, anche se non ne comprende i contenuti, ad esempio in una lingua straniera.

Nel secondo blocco di codice possiamo comprendere l'architettura anche senza comprenderne il contenuto, perché gli elementi semantici forniscono il significato e la struttura. Come puoi capire, la prima intestazione è il banner del sito e che probabilmente <h1> è il nome del sito. Il piè di pagina è il piè di pagina del sito: le cinque parole possono essere una dichiarazione sul copyright o un indirizzo dell'attività.

Il markup semantico non serve solo a semplificare la lettura del markup per gli sviluppatori; riguarda soprattutto a semplificare la decifrazione del markup per gli strumenti automatizzati. Gli strumenti per sviluppatori mostrano come anche gli elementi semantici forniscano una struttura leggibile dalle macchine.

Modello a oggetti di accessibilità (AOM)

Quando il browser analizza i contenuti ricevuti, crea il Document Object Model (DOM) e il CSSOM (CSS Object Model). Crea anche un albero dell'accessibilità. I dispositivi di assistenza, come gli screen reader, utilizzano l'AOM per analizzare e interpretare i contenuti. Il DOM è un albero di tutti i nodi nel documento. L'AOM è una sorta di versione semantica del DOM.

Confrontiamo come vengono visualizzate entrambe le strutture di documenti nel riquadro Accessibilità di Firefox:

Nel secondo screenshot, ci sono quattro ruoli di riferimento nel secondo blocco di codice. Utilizza punti di riferimento semantici comodamente denominati <header>, <main>, <footer> e <nav> per la "navigazione". I punti di riferimento forniscono struttura ai contenuti web e assicurano che le sezioni importanti dei contenuti siano facilmente navigabili da tastiera per gli utenti di screen reader.

Tieni presente che <header> e <footer> sono punti di riferimento con i ruoli rispettivamente banner e contentinfo, quando non sono nidificati in altri punti di riferimento. AOM di Chrome mostra quanto segue:

Osservando gli strumenti per sviluppatori di Chrome, noterai una differenza significativa tra il modello a oggetti di accessibilità quando utilizzi elementi semantici e quando non è così.

È abbastanza chiaro che l'uso di elementi semantici favorisce l'accessibilità e l'uso di elementi non semantici riduce l'accessibilità. L'HTML è generalmente accessibile per impostazione predefinita. Il nostro compito di sviluppatori è quello di proteggere la natura accessibile per impostazione predefinita dell'HTML e di garantire la massima accessibilità. Puoi controllare AOM negli strumenti per sviluppatori.

Attributo role

L'attributo role descrive il ruolo di un elemento nel contesto del documento. L'attributo role è un attributo globale, vale a dire valido per tutti gli elementi, definito dalla specifica ARIA anziché dalla specifica HTML WHATWG, dove quasi tutto il resto di questa serie è definito.

Ciascuno degli elementi semantici ha un ruolo implicito, alcuni a seconda del contesto. Come abbiamo visto nello screenshot sugli strumenti per sviluppatori di accessibilità di Firefox, <header>, <main>, <footer> e <nav> di livello superiore erano tutti punti di riferimento, mentre <header> nidificato in <main> era una sezione. Lo screenshot di Chrome elenca i ruoli ARIA di questi elementi: <main> è main, <nav> è navigation e <footer>, perché era il piè di pagina del documento, è contentinfo. Quando <header> è l'intestazione del documento, il ruolo predefinito è banner, che definisce la sezione come intestazione globale del sito. Quando <header> o <footer> è nidificato all'interno di un elemento di sezione, non è un ruolo di riferimento. Gli screenshot di entrambi gli strumenti per sviluppatori lo mostrano.

I nomi dei ruoli degli elementi sono importanti nella creazione di AOM. La semantica di un elemento, o "ruolo", è importante per le tecnologie per la disabilità e, in alcuni casi, per i motori di ricerca. Gli utenti di tecnologie per la disabilità si basano sulla semantica per esplorare e comprendere il significato dei contenuti. Il ruolo dell'elemento consente a un utente di accedere rapidamente ai contenuti che cerca e, cosa ancora più importante, indica all'utente di screen reader come interagire con un elemento interattivo una volta messo a fuoco.

Gli elementi interattivi, come pulsanti, link, intervalli e caselle di controllo, hanno tutti ruoli impliciti, vengono aggiunti automaticamente alla sequenza di schede della tastiera e tutti dispongono del supporto predefinito delle azioni utente previste. Il ruolo implicito, o il valore role esplicito, indica all'utente di aspettarsi interazioni predefinite specifiche dell'elemento.

Utilizzando l'attributo role, puoi assegnare un ruolo a qualsiasi elemento, compreso un ruolo diverso da quello suggerito dal tag. Ad esempio, <button> ha il ruolo implicito di button. Con role="button", puoi trasformare semanticamente qualsiasi elemento in un pulsante: <p role="button">Click Me</p>.

L'aggiunta di role="button" a un elemento informa gli screen reader che si tratta di un pulsante, ma non ne modifica l'aspetto o la funzionalità. L'elemento button offre tantissime funzionalità senza che tu debba fare nulla. L'elemento button viene aggiunto automaticamente alla sequenza di ordinamento delle schede del documento, il che significa che per impostazione predefinita è attivabile dalla tastiera. I tasti Invio e Barra spaziatrice attivano il pulsante. I pulsanti dispongono inoltre di tutti i metodi e le proprietà forniti dall'interfaccia HTMLButtonElement. Se non utilizzi il pulsante semantico per il pulsante, devi programmare nuovamente tutte le funzionalità. È molto più facile usare <button>.

Torna allo screenshot di AOM per il blocco di codice non semantico. Gli elementi non semantici non hanno ruoli impliciti. Possiamo rendere semantica la versione non semantica assegnando un ruolo a ogni elemento:

<div role="banner">
  <span role="heading" aria-level="1">Three words</span>
  <div role="navigation">
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
    <a>one word</a>
  </div>
</div>

Sebbene l'attributo role possa essere utilizzato per aggiungere semantica a qualsiasi elemento, dovresti utilizzare invece elementi con il ruolo implicito necessario.

Elementi semantici

Se ti chiedi "Quale elemento rappresenta al meglio la funzione di questa sezione del markup?" in genere sceglierai l'elemento migliore per il lavoro. L'elemento scelto, e di conseguenza i tag che utilizzi, devono essere appropriati per i contenuti visualizzati, in quanto i tag hanno un significato semantico.

Il codice HTML deve essere utilizzato per strutturare i contenuti, non per definirne l'aspetto. L'aspetto è il regno di CSS. Anche se alcuni elementi sono definiti per avere un aspetto specifico, non utilizzare un elemento in base al modo in cui il foglio di stile dello user agent fa sì che venga visualizzato per impostazione predefinita. Seleziona invece ogni elemento in base al significato semantico e alla funzionalità dell'elemento. Codificare il codice HTML in modo logico, semantico e significativo contribuisce a garantire che il codice CSS venga applicato come previsto.

Scegliere gli elementi giusti per il lavoro durante la programmazione significa che non dovrai refactoring o commentare il tuo HTML. Se pensi di utilizzare l'elemento giusto per il job, sceglierai spesso quello giusto per il job. Se non lo fai, probabilmente non lo farai. Quando comprendi la semantica di ogni elemento e sei consapevole del motivo per cui scegliere l'elemento giusto è importante, in genere sarai in grado di fare la scelta giusta senza ulteriori sforzi.

Nella sezione successiva, utilizzerai gli elementi semantici per creare la struttura del tuo documento.

Verifica le tue conoscenze

Verifica la tua conoscenza dell'HTML semantico.