Elemento address in HTML 5

Il presente articolo è la traduzione dell' originale - "The Address Element - pubblicato originariamente su http://html5doctor.com/the-address-element/. La traduzione viene riportata con il consenso dei curatori del sito. Eventuali immagini e porzioni di codice sono dei legittimi proprietari.

L'elemento <address>, già presente nelle spcifiche HTML 3 redatte nel 1995, continua ad essere ancora presente nelle ultime bozze dell' HTML5. Circa quindici anni dopo la sua creazione, è ancora causa di  confusione tra gli sviluppatori. Come dovrebbe essere utilizzato nelle pagine web l'elemento <address>?

Uso corretto dell'elemento <address>

Diamo un rapido sguardo alle specifiche:

L'elemento address fornisce informazioni di contatto di un documento o parte di esso. Le informazioni fornite dall'elemento address possono comprendere i nomi dei manutentori del documento, collegamenti alle pagine Web dei manutentori, indirizzi e-mail per commenti, indirizzi postali, numeri di telefono e così via. Esso non è appropriato per gli indirizzi postali ed e-mail; dovrebbe essere riservato per fornire informazioni sui contatti delle persone.

Seguendo i consigli appena descritti, si potrebbe avere un impiego del genere:

The HTML5 Doctor is run by the following group of volunteers:

<address>
<a href="http://html5doctor.com/author/jacko">Jack Osborne</a>,
<a href="http://html5doctor.com/author/richc">Rich Clark</a>,
<a href="http://html5doctor.com/author/miker">Mike Robinson</a>,
<a href="http://html5doctor.com/author/toml">Tom Leadbetter</a>,
<a href="http://html5doctor.com/author/brucel">Bruce Lawson</a>,
<a href="http://html5doctor.com/author/remys">Remy Sharp</a>
</address>

Ecco un altro esempio implementato nel sito:

<footer>
<div class="vcard"> by
<address class="author">
<em class="fn"><a title="Posts by Jack Osborne" href="#">Jack Osborne</a></em>
</address> on
<time datetime="2009-11-04" class="published updated">November 4th, 2009</time>
</div>
</footer>

Se si visualizza il codice sorgente della home page, si noterà che è stato usato l'elemento <address> - annidato all'interno dell'elemento <footer> degli articoli - più volte nella stessa pagina. Questo modo è utile in quanto le informazioni dovrebbero essere aggregate.

Uso non corretto dell'elemento <address>

L'errore più comune che si compie con l'elemento <address> è quello di riscrivere gli indirizzi come si usava solitamente fare in precedenza. Si veda il seguente esempio:

<!-- This is bad! -->
<address>
Dr. Jack Osborne
HTML5 Hospital,
Doctorville,
Great Britain
Tel: +44 (0)XXXX XXXXXX
</address>

Cosa c'è di sbagliato nel codice? Molto semplicemente, l'elemento <address> non è stato creato per gli indirizzi postali. Per rafforzare tale concetto, le ultime specifiche prevedono che l'elemento <address> non deve essere utilizzato per contenere qualsiasi tipo di indirizzo (ad esempio gli indirizzi postali), a meno che non siano informazioni di contatto rilevanti in un documento o in parte di esso.

Marcatura per indirizzi non conformi all'HTML 5

Come devono essere trattati gli indirizzi che non sono strettamente correlati al documento? Una soluzione potrebbe essere quella di utilizzare l'elemento p in combinazione con il microformat hCard.

Rivediamo l'ultimo esempio di codice, utilizzando hCard:

<div class="vcard">
<p class="fn"><a class="url" href="#">Dr. Jack Osborne</a><p>
<p class="adr">
<span class="street-address">HTML5 Hospital</span>
<span class="region">Doctorville</span>
<span class="postal-code">Postal Code</span>
<span class="country-name">Great Britain</span>
</p>
<p class="tel">+44 (0)XXXX XXXXXX</p>
</div>

Una discussione approfondita in merito a hCard va oltre gli scopi di questo articolo. E' stato inserito come esempio per ribadire che non dovrebbe essere usato l'elemento <address> per indirizzi postali generici ma per dare informazioni di contatto di un documento. Se si volesse massimizzare il valore semantico di queste informazioni, è possibile farlo con l'aggiunta di un paio di semplici classi.

Se non ci si sente a proprio agio con l'implementazione dei microformats nel proprio sito, si visiti il sito hCard generator.