Listas

A veces necesitamos presentar en nuestros documentos algún tipo de índice o menú, o destacar los términos importantes de un tema. El Html tiene algunas etiquetas concebidas para la creación de listas que nos pueden facilitar esto.

Listas ordenadas

Este tipo de listas muestran una serie de elementos ordenados en una secuencia.
Dichos elementos han de estar contenidos entre las etiquetas <ol> y </ol> (de ordered list).

- Atributos de <ol>

  • type="tipo"

    tipo define el tipo de secuenciador, que puede ser uno de los siguientes:
    1 - Números enteros (por defecto)
    A - Letras mayúsculas
    a - Letras minúsculas
    I - Números romanos en mayúsculas
    i - Números romanos en minúsculas

  • start="inicio"

    inicio define cual debe ser el primer indicador de la secuencia, y debe ser un número entero mayor que cero (1 por defecto).
Listas no ordenadas

Son listas en las que cada elemento, en vez de ir precedido de un indicador de secuencia, lleva una viñeta o 'topo'.
Los elementos de estas listas han de estar contenidos entre las etiquetas <ul> y </ul> (de unordered list).

- Atributos de <ul>

  • type="tipo"

    En este caso tipo define el tipo de viñeta o 'topo' a usar en la lista:
    disc - pequeño círculo negro
    circle - pequeña círcunferencia negra
    square - pequeño cuadrado negro
Elementos de lista
Tanto en las listas ordenadas como en las no ordenadas cada elemento se define por las etiquetas <li> y </li>, entre las que se ha de poner la información correspondiente a ese elemento.
La etiqueta <li> admite también el atributo type="tipo", como las etiquetas <ol> y <ul>, pero solo para ese elemento concreto.

Ejemplos:

<ol>
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ol type="1" start="4">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ol type="A">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li type="1">Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ol type="a" start="8">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li type="I">Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ol type="I" start="8">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ol type="i">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ol>
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
 
<ul>
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ul>
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
 
<ul type="disc">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li type="circle">Tercer elemento</li>
</ul>
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
 
<ul type="circle">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li type="circle">Tercer elemento</li>
</ul>
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
 
<ul type="square">
 <li>Primer elemento</li>
 <li>Segundo elemento</li>
 <li type="circle">Tercer elemento</li>
</ul>
  • Primer elemento
  • Segundo elemento
  • Tercer elemento
 
<ul>
 <li>Primer elemento</li>
  <ul>
   <li>Primer subelemento</li>
   <li>Segundo subelemento</li>
   <li>Tercer subelemento</li>
    <ol>
     <li>Primer sub-subelemento</li>
     <li>Segundo sub-subelemento</li>
     <li><a href="https://www.google.es/">
      Tercer sub-subelemento</a>
      <table border="1"><tr>
       <td>celda 1-1</td>
       <td>celda 1-2</td>
      </tr><tr>
       <td>celda 2-1</td>
       <td>celda 2-2</td>
      </tr></table>
     </li>
    </ol>
  </ul>
 <li>Segundo elemento</li>
 <li>Tercer elemento</li>
</ul>
  • Primer elemento
    • Primer subelemento
    • Segundo subelemento
    • Tercer subelemento
      1. Primer sub-subelemento
      2. Segundo sub-subelemento
      3. Tercer sub-subelemento
        celda 1-1 celda 1-2
        celda 2-1 celda 2-2
  • Segundo elemento
  • Tercer elemento

Como podemos ver en este último ejemplo, las listas pueden anidarse, y también pueden contener otros elementos Html como enlaces, tablas, parrafos, etc.

También podemos observar que cuando se anidan listas no ordenadas y no se especifica el tipo de viñeta, la viñeta aparece distinta según la profundidad del anidamiento de cada lista.