6. Listas

Hay tres estilos de listas: listas desordenadas, listas numeradas y listas de definición. A continuación vamos a ver los puntos básicos de cada tipo de lista y varios ejemplos.

La característica común a todas estas listas, es el empleo de dos tipos de etiquetas: una genérica que indica el tipo de lista que se utilizará y la etiqueta que define a cada elemento de nuestra lista.

6.1 Listas desordenadas

Las listas desordenadas (UL) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número. Su código es el siguiente:

<ul type=“disc”>
<li>elemento uno
<li>elemento dos
</ul>

El atributo type designa el símbolo que señalará a cada elemento de nuestra lista, pudiendo escoger entre el disco "disc" (por defecto), cuadrado "square" y círculo "circle".

La etiqueta li designa cada elemento de la lista, originariamente sin etiqueta de cierre, ahora se suele emplear el cierre.

6.2 Listas ordenadas

Las listas ordenadas (OL) sirven para presentar cosas en un orden determinado. Su estructura es muy similar a la anterior. La diferencia está en que en el resultado aparecerá automáticamente un número o letra correlativos para cada elemento.

<ol type=“A”>
<li>elemento uno
<li>elemento dos
</ol>

El atributo type, en este caso, define el elemento de orden a utilizar, pudiendo escoger entre: "1" (lista numerada, por defecto), "A" (ordenada por letras en mayúsculas), "a" (letras minúsculas), "I" (números romanos), "i" (números romanos en minúscula). Con el atributo start podemos definir en qué número de orden comenzar la lista.

6.3 Listas de definición

El último tipo de listas se conoce como listas de definición. Generalmente se usa para listas tipo diccionario o glosario, que se compone de dos partes: un término y su definición.

<dl>
<dt> elemento uno
<dd> definición elemento uno
<dt> elemento dos
<dd> definición elemento dos
</dl>

A diferencia de las dos anteriores, cada renglón de la lista tiene dos partes: 1) el nombre del término a definir, <DT> (definition term) y 2) la definición propiamente dicha, <DD> (definition description).

Estos tres tipos de listas se pueden anidar, utilizando un mismo formato o combinándolos en una sola lista.

<ol type=“1” start="5">
  <li>Etiquetas de formato de texto
    <ul type="disc">
      <li>Negrita (STRONG)
      <li>Cursiva (EM)
    </ul>
  <li>Listas
    <ul>
      <li>Desordenadas
      <li>Ordenadas
      <li>Definición
    </ul>
</ol>

Este formato se utiliza mucho en menús con CSS.

Ejemplos editables

Actualización: enero, 2021. Elena Navntoft.