HTML semantico

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

Semantico significa "riferita al significato". Scrivere codice HTML semantico significa utilizzare elementi HTML per strutturare i contenuti in base al significato di ciascun elemento, non al suo aspetto.

Questa serie non ha ancora trattato molti elementi HTML, ma anche senza conoscere l'HTML, i due snippet di codice seguenti mostrano come il markup semantico possa fornire un contesto per i contenuti. Usano un conteggio parole invece di ipsum lorem per evitare di scorrere, usa la tua 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</div>
    <div>sixty-eight words</div>
    <div>forty-four words</div>
  </div>
</div>
<div>
   <span>five words</span>
</div>

Hai un'idea di cosa si espandono queste parole? Non esattamente.

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 ha trasmesso il significato? Utilizzando solo gli elementi non semantici di <div> e <span>, non è proprio possibile 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 scopo e significato senza aver mai incontrato un tag HTML. Fornisce sicuramente un contesto sufficiente affinché lo sviluppatore possa comprendere il struttura della pagina, anche se non comprende i contenuti, ad esempio quelli in una lingua straniera.

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

Il markup semantico non serve solo a semplificare la lettura del markup per gli sviluppatori; è soprattutto importante per aiutare gli strumenti automatizzati a decifrare il markup. Gli strumenti per sviluppatori dimostrano anche in che modo gli elementi semantici forniscono una struttura leggibile dalle macchine.

Modello a oggetti di accessibilità (AOM)

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

Confrontiamo il rendering di entrambe queste strutture di documenti nel riquadro Accessibilità di Firefox:

Nella Figura 2, sono presenti quattro ruoli di riferimento nel secondo blocco di codice. Utilizza punti di riferimento semantici denominati comodamente <header>, <main>, <footer> e <nav> per la "navigazione". I punti di riferimento strutturano i contenuti web e assicurano che le sezioni importanti dei contenuti siano navigabili dalla tastiera per gli utenti di screen reader.

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

Dando un'occhiata agli strumenti per sviluppatori di Chrome, noterai una differenza significativa tra il modello a oggetti di accessibilità quando si utilizzano elementi semantici e quando non viene utilizzato.

È abbastanza chiaro che l'utilizzo degli elementi semantici favorisce l'accessibilità, mentre l'utilizzo di elementi non semantici lo riduce. Generalmente, il codice HTML è accessibile per impostazione predefinita. Il nostro compito di sviluppatori è proteggere la natura accessibile predefinita del codice HTML e garantire la massima accessibilità per i nostri utenti. Puoi controllare l'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, ovvero valido per tutti gli elementi, definito dalla specifica ARIA anziché dalla specifica HTML WHATWG, dove quasi tutto il resto della serie è definito.

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

I nomi dei ruoli degli elementi sono importanti nella creazione dell'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 della tecnologia per la disabilità si affidano alla 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, possibilmente, ma cosa ancora più importante, indica all'utente di screen reader come interagire con un elemento interattivo una volta che è impostato sullo stato attivo.

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 hanno tutti un supporto predefinito previsto per le azioni utente. Il ruolo implicito o il valore esplicito di role informa l'utente di aspettarsi interazioni dell'utente predefinite specifiche dell'elemento.

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

L'aggiunta di role="button" a un elemento informa gli screen reader che l'elemento è un pulsante, ma non modifica l'aspetto o la funzionalità dell'elemento. L'elemento button offre così tante 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 tramite tastiera. I tasti Invio e la barra spaziatrice attivano il pulsante. Inoltre, includono tutti i metodi e le proprietà forniti dall'interfaccia HTMLButtonElement. Se non utilizzi il pulsante semantico per il pulsante, devi programmare di nuovo tutte queste funzionalità. È molto più facile partire con <button>.

Torna allo screenshot dell'AOM per il blocco di codice non semantico. Tieni presente che 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>

L'attributo role può essere utilizzato per aggiungere semantica a qualsiasi elemento, ma dovresti invece utilizzare elementi con il ruolo implicito che ti serve.

Elementi semantici

Chiediti "Quale elemento rappresenta meglio la funzione di questa sezione del markup?". in genere porta a scegliere l'elemento migliore per il job. L'elemento scelto, e quindi i tag utilizzati, devono essere appropriati ai contenuti visualizzati, in quanto i tag hanno un significato semantico.

L'HTML deve essere utilizzato per strutturare i contenuti, non per definirne l'aspetto. L'aspetto è il regno del CSS. Anche se alcuni elementi sono definiti in modo da apparire in un determinato modo, non utilizzare un elemento in base al modo in cui il foglio di stile dello user agent mostra quell'elemento per impostazione predefinita. Seleziona invece ogni elemento in base alla funzionalità e al significato semantico dell'elemento. Codificare il codice HTML in modo logico, semantico e significativo aiuta a garantire l'applicazione del codice CSS come previsto.

Scegliere gli elementi giusti per il job durante la programmazione significa che non dovrai eseguire il refactoring o commentare il codice HTML. Se pensi di utilizzare l'elemento giusto per il lavoro, molto spesso sceglierai quello più adatto al lavoro. In caso contrario, probabilmente non sarà così. Una volta che conosci 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 molti sforzi aggiuntivi.

Successivamente, utilizzerai gli elementi semantici per creare struttura del documento.

Verifica le tue conoscenze

Verifica la tua conoscenza dell'HTML semantico.