← Formateo de texto Listas Tablas →


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

editar

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

editar

(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

editar

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>