Muchas veces necesitaremos crear un listado de terminos o palabras y poder asignarles unas características comunes a todas ellas. Para poder hacer esto tenemos unas etiquetas específicas que nos permitiran crearlas. Tenemos tres tipos difrentes de listas:

1. Listas desordenadas <ul>
2. Listas ordenadas <ol>
3. Listas de definición <dl>

Las listas desordenadas las creamos con la etiqueta <ul>...</ul> y despues para añadirle elementos tenemos las etiquetas <li>...</li>. 

Atributos opcionales

• type: Con este atributo especificamos el tipo de viñeta que queremos que tenga nuestra lista.
  • <ul type="square">
  •  <ul type="circle">
  • <ul type="disc">
• compact (compacto): Especifica que las lista debe ser más pequeña de lo normal.

Atributos estandar

• accesskey: Especifica un atajo de teclado apra acceder a un elemento.
• class: Especifica un nombre de clase de un elemento.
• dir: Especifica la dirección del texto para el contenido de un elemento.
• id: Especifica un identificador único para un elemento.
• lang: Especifica un código de idioma para el contenido en un elemento.
• style: Especifica un estilo en línea de un elemento.
• tabindex: Especifica el orden de tabulación de un elemento.
• xml:lang: Especifica un código de idioma para el contenido de un elemento en los documentos xhtml.

Los atributos de eventos

Las listas son compatibles con los siguientes atributos de eventos:

• onblur: Secuencia de comandos para ser ejecutado cuando un elemento pierde el foco
• onclick: Secuencia de comandos para ser ejecutado cuando se pulsa sobre el enlace
• ondbclick: Secuencia de comandos para ser ejecutado cuando se hace doble click en el enlace.
• OnFocus: Secuencia de comandos para ser ejecutado cuando un elemento obtiene el foco.
• onmousedown: Script que se ejecuta cuando se pulsa sobre el enlace.
• onmousemove: Script que se ejecuta cuando el puntero del ratón se mueve.
• onmouseout: Script que se ejecutará cuando el puntero del ratón se mueve fuera de un enlace.
• onmouseover: Script que se ejecutará cuando el puntero del ratón se mueve sobre un enlace.
• onmouseup: Script que se ejecutará cuando el botón del ratón es liberado.
• onkeydown: Script que se ejecuta cuando se pulsa una tecla.
• onkeypress: Script que se ejecuta cuando se pulsa una tecla y se suelta.
• onkeyup: Script que se ejecuta cuando se suelta una tecla.

Ejemplo de una lista desordenada:

<ul type="square" class="lista">

<li> elemento 1 </li>

<li> elemento 2 </li>

<li> elemento 3 </li>

<li> elemento 4 </li>

</ul> 

Las listas ordenadas se crean igual que las desordenadas, lo único que cambia es la etiqueta con las que creamos. Ahora en vez de  <ul>...</ul>, vamos a utilizar <ol>.....</ol>  y despues para añadirle elementos tenemos las etiquetas <li>...</li>, igual que en las listas desordenadas.

Atributos opcionales

• type: Con este atributo especificamos el tipo de viñeta que queremos que tenga nuestra lista.
  • <ul type="1"> Se ordena mediante números.
  •  <ul type="a"> Se ordena mediante letras en minúscula.
  • <ul type="A"> Se ordena mediante letras en mayúscula.
  • <ul type="i"> Se ordena mediante números romanos en letra minúscula.
  • <ul type="I"> Se ordena mediante números romanos en letra mayúscula.
• start:  Mediante este atributo le indicamos en que número va a comenzar los elementos de nuestra lista.

<ol start="5">

• compact (compacto): Especifica que las lista debe ser más pequeña de lo normal.

Atributos estandar

• Son iguales que los de las listas desordenadas

Los atributos de eventos

• Son iguales que las listas desordenadas

Ejemplo de una lista ordenada:

<ul type="A" start="5" class="lista">

<li> elemento 1 </li>

<li> elemento 2 </li>

<li> elemento 3 </li>

<li> elemento 4 </li>

</ul> 

Por último ya solo nos queda ver las listas de definición. Estas si son diferentes. Para crearlas utilizamos las etiquetas <dl>....</dl>, y para los terminos tenemos dos etiquetas, <dt> para el término a definir y <dd> para la definición. 

Este tipo de listas tienen los mismos atributos generales y de eventos que los otros dos tipos de listas.

Veamos un ejemplo de como se crea una lista de definición:

<dl>

<dt>termino 1</dt>

<df>definicion 1</df>

<dt>termino 2</dt>

<df>definicion 2</df>

<dt>termino 3</dt>

<df>definicion 3</df>

<dt>termino 4</dt>

<df>definicion 4</df>

</dl>

http://www.youtube.com/embed/RxrjzWFG5Xs