XHTML: semantica degli elementi

La semantica degli elementi XHTML non ha nulla a che vedere con la semantica studiata in semiologia. Semplicemente, con tale espressione si indica l'uso dei marcatori per lo scopo per cui sono stati creati. Quindi, se nella mia pagina ho la necessità di marcare un titolo, userò un elemento h1... h6 (a seconda del livello di importanza del titolo) o se voglio marcare una citazione di blocco userò un elemento blockquote. L'errore da non commettere è quello di usare un elemento per l'effetto presentazionale che voglio ottenere. Per la presentazione devo ricorrere ai CSS e non all'XHTML. Di seguito vedremo degli esempi di uso corretto e scorretto degli elementi.

Informazioni sull'autore di una pagina

Se voglio inserire nel documento delle informazioni sull'autore della pagina (ossia il creatore del documento), utilizzerò l'elemento address:

<address>Gabriele Romanato<br>
Email: gabriele.romanato[at]gmail.com</address>

In nessun caso si dovrà usare l'elemento address per inserire informazioni sul proprietario della pagina o sul committente del sito. Per far ciò si dovrà creare una sezione specifica che verrà poi formattata con i CSS:

<div id="piedipagina" title="Informazioni sul sito">
<p>Sito.com di S.p.A</p>
</div>

In questo caso si è inserito l'attributo title per fornire informazioni aggiuntive per gli utenti dei lettori di schermo. Tale attributo dovrebbe sempre fornire informazioni extra su un elemento, e non limitarsi a replicarne il contenuto testuale.

Titoli

I titoli sono suddivisi in sei livelli (h1, h2, h3, h4,h5, h6) in ordine decrescente di importanza. h1 è l'elemento con maggiore importanza, h6 quello con minore importanza. Sono fondamentali per dividere un documento in sezioni e sottosezioni organizzate in modo gerarchico:

<h1>Titolo della pagina</h1>

<h2>Sezione</h2>
<h3>Sotto-sezione</h3>

<h2>Sezione</h2>
<h3>Sotto-sezione</h3>
<h4>Sotto-sotto-sezione</h4>

Il titolo di primo livello dovrà essere unico in tutto il documento, a meno che la nostra pagina non richieda una suddivisione più estesa (per esempio nel caso di una tesi di laurea). In ordine decrescente di importanza verranno poi i titoli di secondo, terzo e quarto livello (o oltre). È utile ricordare che i motori di ricerca come Google tendono a prediligere le informazioni strutturate in modo logico e semantico, indicizzando le sezioni della pagina secondo l'ordine di importanza stabilito nel codice XHTML.

Citazioni

Le citazioni si dividono in due categorie: di blocco (blockquote) e inline (q, cite). Esempio:

<blockquote cite="http://www.w3.org/TR/CSS21/intro.html">
<p>
A CSS rule consists of two main parts: selector 
('h1') and declaration
('color:&nbsp;red'). In HTML, element names are case-insensitive so
'h1' works just as well as 'H1'. The declaration has two parts:
property ('color') and value ('red'). While the example above tries to
influence only one of the properties needed for rendering an HTML
document, it qualifies as a style sheet on its own. Combined with
other style sheets (one fundamental feature of CSS is that style
sheets are combined) it will determine the final presentation of the
document.
</p>
</blockquote>

L'elemento blockquote identifica una lunga citazione di blocco. L'attributo cite (facoltativo) indica la fonte della citazione (un URL). Questo elemento non deve mai essere usato per creare l'effetto presentazionale dell'indentazione del testo, che si dovrà invece ottenere con i CSS.

Diverso dall'elemento blockquote è l'elemento q:

<p>In un mio articolo ho detto che:
<q cite="http://gabrieleromanato.altervista.org/css/uso-e-abuso-del-contenuto-generato/">
A differenza di JavaScript, il contenuto generato non è supportato
da Internet Explorer per Windows.</q>
</p>

L'elemento q indentifica una breve citazione inline. Come blockquote anch'esso possiede un attributo cite che indica la fonte della citazione (un URL).

Infine, l'elemento cite indica la fonte di una citazione. Esempio:

<blockquote>
<p>
Sir Walter Elliot, of Kellynch Hall, in Somersetshire, was a man who, 
for his own amusement, never took up any book but the Baronetage; 
there he found occupation for an idle hour, 
and consolation in a distressed one (...)
</p>
<p>Jane Austen <cite>Persuasion</cite></p>
</blockquote>

Si rivela particolarmente utile nel caso in cui la fonte della citazione non disponesse di un URL (come nel caso di un libro).

Enfasi del testo

Per enfatizzare il testo, gli elementi preposti a tale scopo sono em e strong. Il primo indica un'enfasi normale sul testo, il secondo una forte enfasi:

<p>
<em>Questo</em> è importante, ma
<strong>questo</strong> lo è di più
</p>

Sono da preferire ai tag presentazionali i e b, il cui effetto può essere ottenuto con i CSS.

Abbreviazioni ed acronimi

Le abbreviazioni e gli acronimi si indentificano rispettivamente con l'elemento abbr ed acronym:

<p>
Il <abbr title="World Wide Web Consortium">W3C</abbr> ha creato
i <acronym title="Cascading Style Sheets">CSS</acronym>.
</p>

Si consiglia di usare sempre l'attributo title per fornire la frase estesa. Purtroppo le versioni di Internet Explorer inferiori alla 7 non supportano l'elemento abbr.

Testo eliminato ed inserito

Il testo eliminato ed inserito in un documento si indentifica rispettivamente con gli elementi del e ins, che indicano del contenuto obsoleto che viene sostituito da uno più recente:

<p>
<del>Vecchia versione</del>
<ins>Nuova versione</ins>.
</p>

Sono da preferire agli ormai deprecati elementi presentazionali strike e u, il cui effetto si può ottenere con i CSS.

Variabili e istanze

Una variabile o un argomento di un programma vengono rappresentati dall'elemento var:

<p>
La schermata richiede il <var>nome utente</var>.
</p>

La prima istanza di un termine utilizzato in un documento viene rappresentata dall'elemento dfn:

<p>
Il <dfn>Web</dfn> &egrave; nato nel...
</p>

Elenchi

Gli elenchi si dividono in elenchi non ordinati (ul), elenchi ordinati (ol) ed elenchi di definizione (dl). I primi servono a rappresentare una successione di voci senza un ordine preciso:

<ul>
<li>Macintosh</li>
<li>Windows</li>
<li>Linux</li>
</ul>

Al contrario, i secondi indicano un ordine progressivo ben determinato:

<ol>
<li>1. Accendere il computer</li>
<li>2. Inserire nome utente e password</li>
<li>3. Aspettare il caricamento del sistema</li>
</ol>

Infine, gli elenchi di definizione servono a rappresentare dei termini (elemento dt) di cui si da una definizione (elemento dd):

<dl>

<dt>Macintosh</dt>
<dd>Sistema operativo della Apple.</dd>

<dt>Windows</dt>
<dd>Sistema operativo della Microsoft.</dd>

<dt>Linux</dt>
<dd>Sistema operativo creato da Linus Torvalds.</dd>

</dl>

Un uso molto comune degli elenchi riguarda la creazione di menu di navigazione. In mancanza di un elemento specifico, questa soluzione si rivela decisamente appropriata, in quanto nei lettori di schermo e nei browser testuali il menu verrà visualizzato come un normale elenco, facilitando la consultazione dei documenti.

Risorse online

Per l'XHTML, vi rimando a questa ottima guida, in cui sono illustrati tutti gli elementi e, cosa più importante, il loro rapporto genitore-figlio con altri elementi, al fine di evitare errori nell'annidamento.