HTML 5 y CSS 3

Diseño Web Responsivo
#8

Listas HTML


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:

  • Listas no ordenadas o listas de viñetas
  • Listas ordenadas o numeradas
  • Listas de descripción

Listas no ordenadas


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>
	

Listas ordenadas


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.

  1. Listas no ordenadas o listas de viñetas
  2. Listas ordenadas o numeradas
  3. Listas de descripción

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>
	

Listas de descripción


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:

Automóvil
Vehículo de cuatro ruedas con motor
Motocicleta
Vehículo de dos ruedas con motor
Bicicleta
Vehículo de dos ruedas sin motor
Triciclo
Vehículo de tres ruedas sin motor

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>
	

Listas no ordenadas. Algunas pequeñas modificaciones de estilo


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:

  • Listas no ordenadas o listas de viñetas
  • Listas ordenadas o numeradas
  • Listas de descripción

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:

  • Listas no ordenadas o listas de viñetas
  • Listas ordenadas o numeradas
  • Listas de descripción

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:

  • Listas no ordenadas o listas de viñetas
  • Listas ordenadas o numeradas
  • Listas de descripción

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:

  • Listas no ordenadas o listas de viñetas
  • Listas ordenadas o numeradas
  • Listas de descripción

Listas ordenadas. Algunas pequeñas modificaciones de estilo


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:

Días de la semana en inglés. Con <ol type="1">
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

Días de la semana en inglés. Con <ol type="A">
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

Días de la semana en inglés. Con <ol type="a">
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

Días de la semana en inglés. Con <ol type="I">
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

Días de la semana en inglés. Con <ol type="i">
  1. Monday
  2. Tuesday
  3. Wednesday
  4. Thursday
  5. Friday
  6. Saturday
  7. Sunday

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>
	

Listas anidadas


Finalmente, podemos anidar unas listas en otras.

Por ejemplo:

Hortalizas en mi huerto
  • Lechugas
    • Iceberg
    • Romana
  • Pimientos
  • Tomates
    • Canario
    • Rosa
    • Cherry
    • De pera

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>
	
Observa que la lista anidada se introduce y se completa en el interior del ítem de la lista. Es decir, después del contenido del li pero antes de cerrar la etiqueta de ese elemento.
Página 1 Página 2 Página 3 Página 4 Página 5 Página 6 Página 7 Página 8 Página 9 Página 10 Página 11 Página 12 Contenidos
Icono de licencia Creative Commons

Ángel Ricardo Puente Pérez 2023

Icono del W3C Validator