Link block-level in HTML 5

La presente è la traduzione dell' articolo - "Block-level" links in HTML 5 - pubblicato originariamente su http://html5doctor.com/block-level-links-in-html-5/. La traduzione viene riportata con il consenso dei curatori del sito.

Una nuova feature che è possibile avere in HTML 5 è quella di inscrivere elementi di blocco all' interno di un link.

Si immagini di avere una home page con una serie di introduzioni per ogni articolo, ciascuna delle quali conduce ad una pagina dedicata al testo integrale di questo articolo. Se volessimo, per ogni articolo, un titolo ed una immagine cliccabili, con l' attuale markup che oggi viene adottato, avremmo un codice simile al seguente:

<div class="story">
<h3><a href="/story1.html">Bruce Lawson voted sexiest man on Earth</a></h3>
<p><a href="/story1.html"><img src="/bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p>
<p><a href="/story1.html">Read more</a></p>
</div>

Si noti che nell' esempio sono stati riportati tre identici link (o due, se, come nel sito della BBC, si dà per scontato che i suoi lettori non necessitino del link "Leggi tutto...").

In HTML 5 il codice precedente diventa:

<article>
<a href="/story1.html"><h3>Bruce Lawson voted sexiest man on Earth</h3>
<p><img src="/bruce.jpg" alt="gorgeous lovebundle.">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p>
<p>Read more</p></a>
</article>

Come si può vedere, in un unico collegamento viene inclusa l' intera introduzione, l'immagine ed il link per leggere tutto l'articolo creando un' area linkabile molto più ampia.

Due annotazioni da fare in merito all' accessibilità: in primo luogo non è necessario preoccuparsi del fatto che ogni link "Leggi tutto..." abbia una diversa destinazione (cfr. WCAG 2) in quanto ogni articolo viene contraddistinto da un link unico. In secondo luogo si noti che è stato cambiato il testo alternativo dell' immagine. Nel primo esempio l'immagine è trattata come un link con una sua destinazione, mentre nel secondo è solo una foto che descrive l'immagine stessa fornendo, ad uno screen reader, maggiori informazioni.

Ottimo, ma nulla di nuovo

C'è qualcosa di interessante in merito a tale tecnica, in realtà non nuova, che è possibile fare con HTML 5. XHTML 2 ha un meccanisco simile che permette di avere un "href"  per ogni elemento in HTML 5,  come ha scritto Eric Meyer in un suo articolo ma, ovviamente, ciò non è retrocompatibile. Un' altra soluzione per lo stesso problema potrebbe essere quella di cambiare le regole per il selettore "a", come mostrato in una pagina di test, che funziona nella maggior parte dei browser.

Questa è una delle cose interessanti del linguaggio HTML 5 - il comportamento dei browser con i documenti esistenti.  Non vi era alcuna ragione di avere una struttura non valida in merito al comportamento dei link che contengono elementi a livello di blocco.

(Ironia della sorte: l' esempio fatto da Eric Meyer è stato quello di linkare  tutte le celle di una tabella; cosa, questa, che non funziona in HTML 5. Si necessita dello script per fare ciò).