Line Height

Negli ultimi giorni ho avuto modo di navigare felicemente nella grande blogsfera americana dedicata a webdesign e webstandards, e tanto per cambiare sono capitato sul blog della famosa Veerle.

Una cosa che mi ha colpito molto (ma la tecnica è già conosciuta e sfruttata da tempo), è la lista dei collegamenti sotto la voce approved, completa di titolo, descrizione, e data. Dal punto di vista estetico l'effetto rende magnificamente, e l'utente è invogliato a cliccare nella zona sensibile.

Dal punto di vista prettamente stutturale, invece, siamo spesso costretti a immolare del buon codice affinchè si adatti alle nostre esigenze - in questo contesto esclusivamente legate all'estetica. E' infatti quello che succede sul blog della nota webdesigner belga.

Il markup si presenta come una lista di links, in cui dentro ad ogni tag a vengono inserite interruzioni di linea (br) e elementi span senza contenuto semantico. Lo schema è:

<li><a href="" title="">Titolo<br />
<em>Descrizione.</em><br />
<span>Data</span></a></li>

Ovviamente, tralasciando alcune imprecisioni che personalmente avrei preferito evitare, e considerando l'effetto finale che si vuol ottenere, pensavo a quale potrebbe effettivamente essere una soluzione semantica in grado di offrire agli sviluppatori una sintassi standard ed univoca per generare liste di links dettagliate. XHTML 2.0 ne offre moltissime, fra le quali io propongo questa:

<ul role="links:detailed-list">
    <li href="">
        <span>Titolo</span>
        <p>Descrizione</p>
    </li>

    <li href="">
        <span>Titolo</span>
        <p>Descrizione</p>
    </li>
</ul>

Il risultato è semantico, pulito, innovativo. La lista non è ordinata ed ha lo scopo di specificare una sequenza dettagliata di collegamenti: ogni voce ha un campo per il titolo, ed uno per un'eventuale descrizione. La destinazione di ogni link è specificata nell'elemento li.

Nelle nuove specifiche è stato infatti introdotto un nuovo modello per i collegamenti ipertestuali, che ci permetterà di specificare attributi originariamente legati al tag a per ogni elemento (o quasi) del namespace XHTML 2.0. Il risultato è che potremo ottenere facilmente ipertesti complessi senza compromettere o forzare la semantica del documento.

In più, questo aprirebbe la strada a molte interessanti e creative interpretazioni nell'ambito del design vero e proprio, legate per esempio proprio alla combinazione con la pseudo classe :hover, per realizzare velocemente e in maniera intuitiva un area senisibile al click composta di più elementi annidati.

Per approfondimenti:

• Uno sguardo a XHTML 2.0
• Uno sguardo ad XHTML 2.0 (parte 2)
• Riflessione: Sull'uso dell'attributo role

Vedere anche:

• Le novità di XHTML 2.0
• Specifiche W3C ufficiali per XHTML 2.0