Pràctiques
Les llistes ofereixen la possibilitat de presentar cert tipus d'informació d'una manera útil i simple, ja sigui per ordenar-la, jerarquitzar-la o numerar-la.
Les llistes, juntament amb els paràgrafs i les capçaleres, són un dels elements XHTML que s'utilitzen amb més freqüència a les pàgines web. No estan limitades a les pàgines de text, sinó que poden utilitzar-se en circumstàncies diverses i amb una gran varietat d'estils de presentació.
Un llistat d'enllaços, un llistat d'alumnes, un llistat d'activitats, un conjunt de definicions,... són estructures que es poden localitzar amb certa facilitat en una pàgina web.
Una llista d'ítems es pot representar a una pàgina web de tres maneres diferents segons el tipus d'informació que presentin. El llenguatge XHTML disposa de tres estructures que es corresponen a cadascuna d'elles:
A les anomenades llistes desordenades (unordered lists) l'ordre o seqüència dels elements que les forma no és important o bé no existeix un criteri que defineixi una seqüencia concreta. Estarien dins d'aquest tipus una llista de la compra, d'autors literaris, de grups musicals,... L'etiqueta que especifica la W3C per a les llistes desordenades és <ul>. Veieu l'exemple:
<ul> <li>Barcelona</li> <li>Tarragona</li> <li>Lleida</li> <li>Zaragoza</li> <li>Madrid</li> </ul>
L'etiqueta <li> (list item) marca els elements dins de l'estructura d'una llista, i és una etiqueta comú tant a les llistes desordenades com a les ordenades. Visualment quedaria de la següent manera:
Els elements de les llistes desordenades van precedits de bullets, que són símbols, usualment figures geomètriques (punts, cercles, quadrats,...) que apareixen davant de cada un dels ítems de la llista i identifiquen visualment les llistes desordenades.
A les llistes ordenades (ordered lists) l'ordre o seqüència dels elements que la formen sí que és important, és una seqüència que ve determinada per un criteri o una regla específics. Una llista ordenada podria ser un llistat d'alumnes on el criteri d'ordre seria l'alfabètic, una recepta de cuina on cada pas determina el següent,...
L'etiqueta <ol> és la que especifica l'estructura d'una llista ordenada. L'etiqueta <li> continua marcant els element d'aquesta llista en el llenguatge XHTML, però els bullets queden substituits per nombres que indiquen la seqüenciació dels elements. Veieu un exemple:
<ol> <li>Barcelona</li> <li>Tarragona</li> <li>Lleida/li> <li>Zaragoza</li> <li>Madrid</li> </ol>
Fixeu-vos que és la mateixa llista anterior, però amb la diferència que els elements queden ordenats numéricament. Aquest ordre podria respondre al criteri de les ciutats per les que pasarà el tren d'alta velocitat en el seu recorregut Barcelona-Madrid. Al codi XHTML només ha canviat l'etiqueta <ul> que identifica una llista desordenada, per l'etiqueta <ol> que correspon a una llista ordenada. Visualment quedaria de la següent manera:
Les listes de definicions responen a la necessitat de presentar un conjunt de termes amb les seves definicions corresponents. El elements de la llista, per tant, tindran dues parts, el terme i la descripció, que s'identificaran amb dues etiquetes diferents.
Les etiquetes que el W3C recomana per les llistes de definicions són:
<dl> (definition list) per a l'estructura global de la llista <dt> (definition term) per al terme a definir<dd> (definition description) per a la descripció del termeFixeu-vos que les llistes de definicions són l'únic tipus de llista que no fa servir l'etiqueta <li>.
Veieu a continuació un exemple d'una llista de definicions:
<dl> <dt>Gat</dt> <dd>Aparell mecànic o hidràulic, portàtil o fix, emprat per elevar càrregues.</dd> <dt>Gos</dt> <dd>Gaudir de gran abundància i benestar.</dd> <dt>Canari</dt> <dd>Habitant de les illes Canàries.</dd> </dl>
Visualment quedaria de la següent manera:
El significat i ús de les etiquetes <ul>, <ol> y <dl> no determinen únicament l'aspecte visual i estètic de les llistes, sinó una estructura semàntica diferent, segons es faci servir una o una altra, i, per tant, han de ser utilitzades en conseqüència amb el context del document.
Una propietat de les llistes, que pot ser molt útil en determinades situacions, és que permeten inserir una llista dins d'una altra llista, ja siguin del mateix tipus o de tipus diferents. Aquestes llistes incloses dins d'unes altres són les llistes anidades.
Alguns exemples de llistes anidades serien una explicació d'una carta de plats d'un restaurant on els plats estan agrupats en entrants, carns, peixos i postres, o un llistat de tasques a fer on alguna d'elles queda desglossada en d'altres més específiques, com l'exemple que podeu veure a continuació:
<ol> <li> Cridar als pares de l'alumne X <ul> <li>Comentar la darrera avaluació</li> <li>Proposar un conjunt d'estrategies per a reforçar les matemàtiques</li> <li>Valorar el curs vinent</li> </ul> </li> <li> Passar les notes a SAGA </li> <li> Preparar el claustre del día 13/06/2007 </li> <li> Consultar cursos de formació del curs 2007/2008</li> </ol>
Fixeu-vos que per crear una llista anidada el que heu de fer és incloure tot el codi d'una llista dins d'un element de l'altra, vigilant que la nova llista estigui dins dels límits marcats per les etiquetes de l'element, l'etiqueta que marca l'inici, </li>, i la que marca el final, </li>, tal com es veu a l'exemple anterior. Visualment, l'anterior llista quedaria de la següent manera: