# Lenguaje HTML/Listas

En este capítulo veremos los tres tipos de listas que podemos incluir en nuestros documentos y las herramientas que HTML nos proporciona.

## Listas no ordenadas

Son listas en las que la información se muestra de forma no secuenciada.
Para construirlas emplearemos los elementos: ul y li.
* Elemento ul
(unordered list = lista desordenada) Es el que define y delimita la lista.
Sus etiquetas son: <ul> y </ul> (ambas obligatorias)
Sus principales atributos genéricos son:
    style - (estilo) define estilos.
Sus principales atributos de transición son:
    type - (tipo) estilo de viñeta.
       Valores posibles: 'disc' (disco), 'circle' (círculo) y 'square' (cuadrado)
* Elemento li
(list item = item de la lista ) Es el que define y delimita cada uno de los puntos de la lista.
Sus etiquetas son: <li> y </li> (la de cierre opcional ¡úsala de todos modos!)
Sus principales atributos genéricos son:
    style - define estilos.
Sus principales atributos de transición son:
    type - tipo de viñeta.
       Valores posibles: Los mismos que en ul; 'disc', 'circle' y 'square'
Ejemplo de lista no ordenada :
* <ul>
* <li>Listas ordenadas</li>
* <li>Listas no ordenadas</li>
* <li>Listas de definiciones</li>
* </ul>
El resultado será este:
* Listas ordenadas
* Listas no ordenadas
* Listas de definiciones

## Listas ordenadas

(Comúnmente se les llama listas numeradas) Son listas en las que la información se muestra secuenciada numérica o alfabéticamente.
Para construirlas emplearemos los elementos: ol y li.
* Elemento ol
(ordered list = lista ordenada) Es el que define y delimita la lista.
Sus etiquetas son: <ol> y </ol> (ambas obligatorias)
Sus principales atributos genéricos son:
    style - define estilos.
       Valores posibles:
          text-decoration: underline; - Subraya las palabras de la lista, pero no subraya las viñetas de la lista en sí.
Ejemplo: :
* <ol style="text-decoration: underline">
* <li>Empezamos</li>
* <li>Continuamos</li>
* <li>Terminamos</li>
* </ol>
* Empezamos
* Continuamos
* Terminamos
             Si aplicamos el valor solo a una de las etiquetas <li> el valor se aplicará solo a dicha parte. Ejemplo:
Ejemplo: :
* <ol>
* <li>Empezamos</li>
* <li style="text-decoration: underline">Continuamos</li>
* <li>Terminamos</li>
* </ol>
* Empezamos
* Continuamos
* Terminamos
Sus principales atributos de transición son:
    type - tipo de secuencia.
       Valores posibles:
          '1' - secuencia numérica.
          'I' - secuencia numérica romana en mayúscula.
          'i' - secuencia numérica romana en minúscula.
          'A' - secuencia alfabética en mayúscula.
          'a' - secuencia alfabética en minúscula.
    start - valor inicial de la secuencia.
       Valores posibles: un número.
* Elemento li.
Es el que define y delimita cada uno de los puntos de la lista. Sus etiquetas son: <li> y </li> (la de cierre opcional ¡úsala de todos modos!)
Sus principales atributos genéricos son:
    style - define estilos.
Sus principales atributos de transición son:
    type - tipo de secuencia.
       Valores posibles:'1', 'I', 'i', 'A', 'a'.
    value - valor de reinicio de la secuencia.
       Valores posibles: un número.
Ejemplo de lista ordenada :
* <ol>
* <li>Empezamos</li>
* <li>Continuamos</li>
* <li>Terminamos</li>
* </ol>
El resultado será este:
* Empezamos
* Continuamos
* Terminamos
Ejemplo de lista ordenada con secuencia numérica romana en minúscula :
* <ol type="i">
* <li>Empezamos</li>
* <li>Continuamos</li>
* <li>Terminamos</li>
* </ol>
El resultado será este:
* Empezamos
* Continuamos
* Terminamos
* Verificando

## Listas de definiciones o glosario

Son listas en las que la información se divide en dos secciones: concepto y definición.
Para construirlas emplearemos los elementos: dl, dt y dd.
* Elemento dl
Es el que define y delimita la lista.
Sus etiquetas son: <dl> y </dl> (ambas obligatorias)
* Elemento dt
Es el que define y delimita el concepto a definir.
Sus etiquetas son: <dt> y </dt> (la de cierre, opcional, ¡úsala de todos modos!)
* Elemento dd
Es el que define y delimita la definición del concepto.
Sus etiquetas son: <dd> y </dd> (la de cierre, opcional, ¡úsala de todos modos!)
Las listas de definiciones se puede anidar.
Ejemplo de lista de definiciones :
* <dl>
* <dt>HTML</dt>
* <dd>HyperText Markup Language</dd>
* <dt>WWW</dt>
* <dd>World Wide Web</dd>
* </dl>