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>

El resultado será este:

1. Empezamos
2. Continuamos
3. 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>

El resultado será este:

1. Empezamos
2. Continuamos
3. 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:

1. Empezamos
2. Continuamos
3. 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:

1. Empezamos
2. Continuamos
3. Terminamos
4. 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>