L’importanza del markup semantico

“Nel markup, la semantica riguarda il significato di un elemento e come questo elemento descrive il suo contenuto.”

Molly E. Holzschlag

Oggi voglio parlarti dell’importanza dell’utilizzo della semantica nella redazione di un documento (x)html. Ogni tag è stato progettato allo scopo di assegnare un significato, un valore semantico alla struttura di un sito web.

Ad esempio, se volessimo  editare a codice (x)html la citazione di Molly, probabilmente scriveremo così:

<q>
    Nel markup, la semantica riguarda il significato di un elemento e come questo
    elemento descrive il suo contenuto.
</q>

<cite>Molly E.Holzschlag</cite>

Questo è un esempio di markup semantico, dove ogni elemento è utilizzato in base alla sua funzione originaria. Come si dice, il giusto peso ad ogni frase.

L’applicazione corretta di un markup semantico semplifica il lavoro dei motori di ricerca che devono localizzare il contenuto del sito. Inoltre gli utenti che usufruiscono di screen reader attraverso l’uso semantico dei tag riusciranno a leggere correttamente i contenuti del sito.

In questo articolo vorrei esaminare alcuni errori di  markup non semantico che hanno caratterizzato il web negli anni precedenti, e che – seppur in minima parte –  sono ancora presenti in diversi siti web.

Come strutturare un elemento di navigazione?

Di seguito l’esempio di un semplice menù di navigazione:

<p>
    <a href=”#”>Home</a>
</p>

<br/>

<p>
    <a href=”#”>Secondo link</a>
</p>

<br/>

<p>
    <a href=”#”>Terzo link</a>
</p>

<br/>

Nell’esempio precedente abbiamo inserito tre paragrafi – separati tra loro tramite il tag <br/> – che non danno alcuna indicazione del loro contenuto all’interno della struttura della pagina. Ora vedremo perché a livello semantico tale codice non è corretto.

Un menù è l’indice dei contenuti del sito, quindi  per una rappresentazione semantica di questo elemento, è preferibile utilizzare una lista (il tag <ul>).

Di seguito, mostriamo il corretto markup per creare un menù:

<ul id=“nav”>
    <li id=”primo_link”><a href=”#”>Primo LINK</a></li>
    <li id=”secondo_link”><a href=”#”>Secondo LINK</a></li>
    <li id=”terzo_link”><a href=”#”>Terzo LINK</a></li>
</ul>

Un codice molto compatto come nell’ultimo esempio rende più fruibile il documento sia quando l’utente disattiva i fogli di stile, sia quando gli utenti disabili navigano con uno screen reader.

Come usare in maniera coerente gli Heading?

L’uso corretto degli elementi <Hn> è importante per chi fa uso degli screen reader. Dovrebbero essere usati in scala, dall’intestazione più grande (H1) all’intestazione più piccola (H6) e questa gerarchia dovrebbe avere una valenza semantica, e non solo da un punto di vista prettamente visivo.

Questo significa che occorre utilizzare gli headings in modo corretto, ad esempio utilizzando il tag <h1>  per contrassegnare il titolo del branding, gli <h2> nei titoli di sezioni, gli <h3> nei titoli delle sottosezioni, e via dicendo. A volte capita che in un particolare progetto si abbia la necessità di rendere l’aspetto grafico di un <hn> più piccolo o più grande rispetto al default di un foglio di stile di un browser. Per esempio, nel caso che un elemento <h2> debba essere visivamente più piccolo di  un <h3>, la modifica va effettuata tramite i fogli di stile e non cambiando tag.

Qui esporrò il concetto con un esempio di quanto ho detto :

<h1> Prima Intestazione</h1>

<p>......</p>

<h2>Seconda Intestazione</h2>

<p>.....</p>

<h3>Terza Intestazione</h3>

Useremo la proprietà font-size dei CSS per cambiare le dimensioni di default degli headings.

h1 {font-size: 150%;}

h2 {font-size: 120%;}

h3 {font-size: 140%;}

Facendo così non abbiamo snaturato il valore semantico degli Headings, ma grazie ai CSS abbiamo assegnato uno stile diverso agli elementi <h2> ed <h3>.

E siamo arrivati all’ultimo esempio di questa carrellata di markup semantico.

Quella che segue è un immagine di esempio che mostra l’utilizzo dell’elemento <dl>.

Un web designer poco attento potrebbe rendere il markup in questo modo :

<h1>CAFF&Egrave;</h1>

<p>
    <img src=”caffè.jpg” alt=”tazza di caff&egrave;” width=”130” height=”120”>

Il caffè è una bevanda ottenuta dalla macinazione dei semi di alcune specie di piccoli alberi tropicali appartenenti al genere Coffea, parte della famiglia botanica delle Rubiaceae, un gruppo di angiosperme che comprende oltre 600 generi e 13.500 specie.

Sebbene all'interno del genere Coffea siano identificate e descritte oltre 100 specie, commercialmente le diverse specie di origine sono presentate come diverse varietà di caffè e le più diffuse sono l'"arabica" (Coffea arabica) e la "robusta" (Coffea canephora).

</p>

Attenzione, non voglio dire che questo markup sia sbagliato. Verrà convalidato di sicuro, ma a livello semantico non è completamente corretto.

L’elemento <dl> (lista di definizioni), in correlazione agli elementi <dt> e <dd> è poco sfruttato nel markup. Il W3C definisce tali elementi correlati tra loro come una relazione del titolo di un oggetto e la sua relativa descrizione.

<dl>
    <dt>CAFF&Egrave;</dt>
    <dd>
        <img src=”caffè.jpg” alt=”tazza di caff&egrave;” width=”130” height=”120”>
        Il caffè è una bevanda ottenuta dalla macinazione dei semi di alcune specie di piccoli alberi tropicali appartenenti al genere Coffea, parte della famiglia botanica delle Rubiaceae, un gruppo di angiosperme che comprende oltre 600 generi e 13.500 specie.

Sebbene all'interno del genere Coffea siano identificate e descritte oltre 100 specie, commercialmente le diverse specie di origine sono presentate come diverse varietà di caffè e le più diffuse sono l'"arabica" (Coffea arabica) e la "robusta" (Coffea canephora).
    </dd>
</dl>

CONCLUSIONI

In conclusione riassumiamo questo articolo in tre punti fondamentali:

  • strutturare un sito con elementi semantici  semplifica la vita agli screen reader, browser e dispositivi mobili;
  • prima di editare codice bisogna capire quale tag semantico e strutturale possa rendere significativo quel determinato contenuto;
  • pensare in modo strutturale e non grafico (i CSS servono a questo).
Tag: , , , ,

L'autore

Nonostante inizialmente fosse orientato verso il graphic design, Ivan con il tempo si è appassionato agli standard web, in particolare a tutto ciò che concerne accessibilità,usabilità,(x)html/css.

Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

15 commenti

  1. Riccardo
  2. Ivan
    • Ivan
  3. Andrea
    • Ivan
  4. alessia m.

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento