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

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

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">

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

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