El elemento lista es muy utilizado en el lenguaje HTML.
Su principal cometido es enumerar una serie de conceptos relacionados. Pero su uso se ha extendido mucho con el CSS y ha pasado a ser utilizado en muchas de las barras de navegación que vemos en las páginas web.
De momento, utilizando un listado, enumeramos los tres tipos de listas:
También llamadas de viñetas, muestran los conceptos con un icono circular o cuadrado delante. Se introducen con la etiqueta <ul> del inglés unordered list. También se les llama listas desordenadas pero, esta denominación, creo que no es muy afortunada. Es mejor el concepto lista de viñetas. Son listas en las que el orden de los elementos no es relevante. Cada uno de los conceptos listados van entre las etiquetas <li> y </li> del inglés list item
Por ejemplo, para listar la lista anterior, hemos escrito.
<ul> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ul>
En lugar de que cada ítem vaya precedido por una viñeta, el listado se muestra con números de orden: 1, 2, 3...
Se escriben con la etiqueta <ol> del inglés ordered list. Luego, cada concepto, va de nuevo con las etiquetas <li>. Vamos a escribir la lista anterior empleando este tipo de listado.
Esto es lo que hemos escrito:
<ol> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ol>
Se emplean para listar términos y aportar su correspondiente descripción.
Se introducen con la etiqueta <dl> del inglés description list.
Cada término se introduce con la etiqueta <dt> del inglés description term.
Y cada definición con la etiqueta <dd> del ingés description definition.
Por ejemplo, listamos la descripción de estos cuatro vehículos:
Esto es lo que hemos escrito:
<dl> <dt>Automóvil</dt> <dd>Vehículo de cuatro ruedas con motor</dd> <dt>Motocicleta</dt> <dd>Vehículo de dos ruedas con motor</dd> <dt>Bicicleta</dt> <dd>Vehículo de dos ruedas sin motor</dd> <dt>Triciclo</dt> <dd>Vehículo de tres ruedas sin motor</dd> </dl>
Por defecto, el icono que se muestra delante de cada ítem del listado es un disco negro.
Con el atributo style podemos cambiar la viñeta.
Si ponemos el list-style-type a disc; La cosa no cambia. Es el valor que viene por defecto.
<ul style="list-style-type:disc;"> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ul>
Resultado:
Si ponemos el list-style-type a circle; el icono pasa a ser un círculo con el interior vacío.
<ul style="list-style-type:circle;"> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ul>
Resultado:
Si ponemos el list-style-type a square; el icono pasa a ser un cuadrado.
<ul style="list-style-type:square"> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ul>
Resultado:
Si ponemos el list-style-type a none; no se muestra ninguna viñeta.
<ul style="list-style-type:none;"> <li>Listas no ordenadas o listas de viñetas</li> <li>Listas ordenadas o numeradas</li> <li>Listas de descripción</li> </ul>
Resultado:
En este caso, la sintaxis es algo más sencilla.
No hay que escribir el atributo style. Directamente, escribimos el atributo type y elegimos uno de los cinco valores:
Veamos algunos ejemplos:
A modo de ejemplo, ponemos el código de esta última lista:
<ol type="i"> <li>Monday</li> <li>Tuesday</li> <li>Wednesday</li> <li>Thursday</li> <li>Friday</li> <li>Saturday</li> <li>Sunday</li> </ol>
Finalmente, podemos anidar unas listas en otras.
Por ejemplo:
Este es el código que hemos escrito:
<b>Hortalizas en mi huerto</b> <ul> <li>Lechugas <ul> <li>Iceberg</li> <li>Romana</li> </ul> </li> <li>Pimientos</li> <li>Tomates <ul> <li>Canario</li> <li>Rosa</li> <li>Cherry</li> <li>De pera</li> </ul> </li> </ul>