Capítulo 5.
Listas
En ocasiones, es posible agrupar determinadas palabras o frases en un conjunto de elementos que tie-
nen más significado de forma conjunta. El menú de navegación de un sitio web por ejemplo está for-
mado por un grupo de palabras. Aunque cada palabra por separado tiene sentido, de forma conjunta
constituyen el menú de navegación de la página, por lo que su significado conjunto es mayor que por
separado.
El lenguaje HTML define tres tipos diferentes de listas para agrupar los elementos: listas no ordenadas
(se trata de una colección simple de elementos en la que no importa su orden), listas ordenadas (si-
milar a la anterior, pero los elementos están numerados y por tanto, importa su orden) y listas de
definición (un conjunto de términos y definiciones similar a un diccionario).
5.1. Listas no ordenadas
Las listas no ordenadas son las más sencillas y las que más se utilizan. Una lista no ordenada es un
conjunto de elementos relacionados entre sí pero para los que no se indica un orden o secuencia de-
terminados. La etiqueta <ul> encierra todos los elementos de la lista y la etiqueta <li> cada uno de
sus elementos.
<ul> Se emplea para definir listas no ordenadas
Atributos comunes básicos, internacionalización y eventos Tipo de elemento Bloque
Atributos propios -
Se emplea para definir los elementos de las listas (ordenadas y no
<li> ordenadas)
Atributos básicos, internacionalización y eventos Tipo de elemento Bloque
comunes
Atributos propios -
73
Capítulo 5. Listas Introducción a XHTML
El siguiente código HTML muestra un ejemplo sencillo de lista no ordenada:
<html>
<head><title>Ejemplo de etiqueta UL</title></head>
<body>
<h1>Menú</h1>
<ul>
<li>Inicio</li>
<li>Noticias</li>
<li>Artículos</li>
<li>Contacto</li>
</ul>
</body>
</html>
Figura 5.1 Ejemplo de uso de la etiqueta ul
El navegador por defecto muestra los elementos de la lista tabulados y con una pequeña viñeta for-
mada por un círculo negro. Como ya se sabe, el aspecto con el que se muestran los elementos de las
listas se puede modificar mediante las hojas de estilos CSS.
5.2. Listas ordenadas
Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos
relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con
las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se
muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del ín-
dice.
En todos estos casos, la lista más adecuada es la lista ordenada, que se define mediante la etiqueta
<ol>. Los elementos de la lista se definen mediante la etiqueta <li>, la misma que se utiliza en las lis-
tas no ordenadas.
74
Introducción a XHTML Capítulo 5. Listas
<ol> Se emplea para definir listas ordenadas
Atributos comunes básicos, internacionalización y eventos Tipo de elemento Bloque
Atributos propios -
El siguiente código HTML muestra un ejemplo sencillo de lista ordenada:
<html>
<head><title>Ejemplo de etiqueta OL</title></head>
<body>
<h1>Instrucciones</h1>
<ol>
<li>Enchufar correctamente</li>
<li>Comprobar conexiones</li>
<li>Encender el aparato</li>
</ol>
</body>
</html>
Figura 5.2 Ejemplo de uso de la etiqueta ol
El navegador muestra la lista de forma muy parecida a las listas no ordenadas, salvo que en este caso
no se emplean viñetas gráficas en los elementos, sino que se numeran de forma consecutiva. El tipo
de numeración empleada también se puede modificar aplicando hojas de estilos CSS a los elementos
de la lista.
5.3. Listas de definición
Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es simi-
lar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. La
etiqueta <dl> crea la lista de definición y las etiquetas <dt> y <dd> definen respectivamente el término
y la descripción de cada elemento de la lista.
75
Capítulo 5. Listas Introducción a XHTML
<dl> Se emplea para definir listas de definición
Atributos comunes básicos, internacionalización y eventos Tipo de elemento Bloque
Atributos propios -
Se emplea para definir los términos de los elementos de una lista de
<dt> definición
Atributos básicos, internacionalización y eventos Tipo de elemento Bloque
comunes
Atributos propios -
Se emplea para indicar las definiciones de los elementos de una lista de
<dd> definición
Atributos básicos, internacionalización y eventos Tipo de elemento Bloque
comunes
Atributos propios -
El siguiente código HTML muestra un ejemplo sencillo de lista de definición:
<html>
<head><title>Ejemplo de etiqueta DL</title></head>
<body>
<h1>Metalenguajes</h1>
<dl>
<dt>SGML</dt>
<dd>Metalenguaje para la definición de otros lenguajes de marcado</dd>
<dt>XML</dt>
<dd>Lenguaje basado en SGML y que se emplea para describir datos</dd>
<dt>RSS</dt>
<dt>GML</dt>
<dt>XHTML</dt>
<dt>SVG</dt>
<dt>XUL</dt>
<dd>Lenguajes derivados de XML para determinadas aplicaciones</dd>
</dl>
</body>
</html>
76
Introducción a XHTML Capítulo 5. Listas
Figura 5.3 Ejemplo de uso de la etiqueta dl
Los navegadores formatean las listas de definición de forma similar a las otras listas, tabulando la
definición y alineando a la izquierda los términos. Aunque no es habitual, cada término puede tener
asociada más de una definición y cada definición puede tener asociada varios términos.
Ejercicio 8
Determinar el código HTML que corresponde a la siguiente lista anidada simple
Figura 5.4 Ejemplo de lista anidada simple de dos niveles
Ejercicio 9
77
Capítulo 5. Listas Introducción a XHTML
Determinar el código HTML que corresponde a la siguiente lista anidada compleja
Figura 5.5 Ejemplo de lista anidada compleja de dos niveles
78
