HTML - Listas

En HTML existen tres tipos de listas. ol muestra una lista ordenada mientras que ul muestra una lista no ordenada, y para realizar una lista de definiciones, la etiqueta usaremos dl. Usa los atributos type y start para hacer una lista según tus necesidades.

  • ul - lista sin clasificar, bullets (puntos).
  • ol - listas ordenadas, números.
  • dl - lista de definiciones.

HTML - La lista ordenada

Usa la etiqueta ol para construir lista lista ordenada. Para señalizar al navegador los elementos de una lista tienes que usar la etiqueta li dentro de ol.

html<h4 align="center">Objetivos</h4>

<ol>
	<li>Encontrar un trabajo</li>
	<li>Ganar mucho dinero</li>
	<li>Cambiarse de ciudad</li>
</ol>

Demo

Objetivos

  1. Encontrar un trabajo
  2. Ganar mucho dinero
  3. Cambiarse de ciudad

Puedes empezar tu lista con el número que desees simplemente especificandolo con la ayuda del atributo start.

html<h4 align="center">Objetivo</h4>

<ol start="4">
	<li>Encontrar un trabajo</li>
	<li>Ganar mucho dinero</li>
	<li>Cambiarse de ciudad</li>
</ol>

Demo

Objetivo

  1. Encontrar un trabajo
  2. Ganar mucho dinero
  3. Cambiarse de ciudad

Este elemento no hace nada fuera de lo común, pero a veces es bastante útil.

HTML - Otros tipos de listas ordenadas

Aparte del ejemplo de arriba existen otros tipos de listas ordenadas. En lugar de la numeración habitual, puedes usar números romanos, o también letras, pero en ambos casos sólo podrás usar letras minúsculas o mayúsculas. Utiliza el atributo type si quieres modificar el tipo de numeración.

html<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
MinúsculasMayúsculasNúmeros romanos en minúsculaNúmeros romanos en mayúsculas
  1. Trabajo
  2. Dinero
  3. Otra ciudad
  1. Trabajo
  2. Dinero
  3. Otra ciudad
  1. Trabajo
  2. Dinero
  3. Otra ciudad
  1. Trabajo
  2. Dinero
  3. Otra ciudad

Lista no ordenada

Para construir una lista no ordenada usamos la etiqueta ul. Las listas no ordenadas son de diferentes tipos: Casillas, puntos, y círculos. El valor estándar en la mayoría de los navegadores son los puntos o bullets.

Lista de compras

html<ul> 
	<li>leche</li>
	<li>queso</li>
	<li>huevos</li>
	<li>azúcar</li>
</ul>

Demo

  • leche
  • queso
  • huevos
  • azúcar

Mas abajo puedes ver como se formas los diferentes estilos de listas que comentamos anteriormente.

html<ul type="square">
<ul type="disc">
<ul type="circle">

HTML - La lista de definición

También puedes hacer listas de definición utilizando la etiqueta dl. Esta lista dará la definición a la palabra especificada. Para que la palabra sea mas evidente y que se distinga bien de la descripción se suele poner también en negrita.

html<dl>
	<dt><strong>Cheese</strong></dt> 
	<dd>Palabra en inglés para queso</dd>
	
	<dt><strong>Computer</strong></dt>
	<dd>Palabra en inglés para ordenador</dd>
</dl>

Demo

Cheese
Palabra en inglés para queso
Computer
Palabra en inglés para ordenador