Archivio > Design, Markup > Singolo: Come realizzare una lista dettagliata di links in XHTML 2.0

Come realizzare una lista dettagliata di links in XHTML 2.0

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.

[Immagine] Un'ottima tecnica, molto apprezzata in ambito webdesign, è quella di creare una lista dettagliata di collegamenti costituita generalmente da titolo e descrizione, e inclusa nel tag <a>

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.

[Immagine] A volte buoni risultati a livello di design comportarno scarsi risultati per quel che concerne la qualità del codice. E' quello che succede sul blog di Veerle - in particolare a riferimento della lista dettagliata di collegamenti - dove dentro un elemento <a> vengono annidati altri tag con differente o inesistente contenuto semantico.

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:

Vedere anche:

Approfondimenti

L'articolo è stato di tuo gradimento? Puoi controllare che vi sia altro di tuo interesse nelle categorie e , oppure iscriverti al notiziario RSS e seguirmi su per restare sempre aggiornato sulle ultime pubblicazioni.

Pubblicato giovedì 01 febbraio 2007.

Discuti

Il blog è in sola lettura.

Paginatura: