Listas en Html

A menudo nos interesará presentar las cosas en forma de listas, ya que permiten hacer enumeraciones de elementos, usando una numeración o no, también crear definiciones de términos

Podemos escoger entre tres tipos distintos:

• Listas numeradas

  sirven para crear una lista con números

• Listas con viñetas

  sirven para crear una lista con símbolos o viñetas, no están numeradas

• Listas de definiciones

  sirven para crear definiciones de términos, no están numeradas y pueden usarse para simular diccionarios

Listas numeradas

Las listas numeradas (ordered lists) sirven para presentar cosas en un orden determinado

En la lista resultante aparecerá automáticamente un número correlativo para cada elemento:

<ol start='3'>
    <li type='a'>Mamíferos</li>
        <li type='a'>Peces
            <ol>
                <li type='a'>Sardina</li>
                <li type='a'>Bacalao</li>
            </ol>
        </li>
        <li type='a' value='8'>Aves</li>
</ol>

En el ejemplo se puede ver que la lista ordenada empieza con el elemento ol incluidos en su interior la lista de elementos li

Se ha usado el atributo type para especificar qué tipo de numeración queremos usar:

• 1

  utiliza valores numéricos

• a

  utiliza letras en minúscula

• A

  utiliza letras en mayúscula

• i

  utiliza números romanos en minúscula

• I

  utiliza números romanos en mayúscula

Si no se especifica, el valor por defecto es 1

Se ha usado el atributo start para especificar a partir de qué número empieza la numeración, en este caso empieza a partir del número 3

Se ha usado el atributo value para especificar un valor concreto para ese elemento, en este caso el número 8

En el ejemplo también podemos observar que listas con numeradas pueden anidarse

Quedando como resultado:

3. Mamíferos
4. Peces
   1. Sardina
   2. Bacalao
8. Aves

Listas con viñetas

Las listas con viñetas (unordered lists) sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un número

En la lista resultante aparecerá automáticamente el símbolo o viñeta elegidos con el atributo:

<ul>
    <li>Mamíferos</li>
        <li>Peces
            <ul>
                <li type='square'>Sardina</li>
                <li type='square'>Bacalao</li>
            </ul>
        </li>
        <li>Aves</li>
</ul>

En el ejemplo se puede ver que la lista ordenada empieza con el elemento ul incluidos en su interior la lista de elementos li

Se ha usado el atributo type para especificar qué tipo de viñeta queremos usar:

• circle

  utiliza un círculo

• disc

  utiliza un círculo con el interior hueco

• square

  utiliza un cuadrado

Si no se especifica, el valor por defecto es circle

En el ejemplo también podemos observar que listas con viñetas pueden anidarse y además se han usado distintos tipos de viñetas para distinguir entre ellas

Quedando como resultado:

• Mamíferos
• Peces
  • Sardina
  • Bacalao
• Aves

Listas de definiciones

Las listas de definición son apropiadas para glosarios (o definiciones de términos)

Gracias a este tipo de lista, pueden construirse sencillos diccionarios

<dl>
   <dt>Sardina
      <dd><p>Pez osteíctio del orden clupeiformes (Sardina pilchardus) del Mediterráneo y del océano Atlántico</p>
<p>De unos 25 cm. de longitud, verde azulado en el dorso, plateado en los flancos y en el vientre</p>
<p>Se consume fresco o en conserva</p></dd>
   </dt>
   <dt>Bacalao
      <dd>Pez marino osteíctio del orden gadiformes (Gadius callarias) que alcanza más de un metro de longitud</dd>
   </dt>
</dl>

En el ejemplo se puede ver que la lista de definiciones que empieza con el elemento dl incluidos en su interior la lista de elementos dt que representan la cosa a definir y los elementos dd que representan la definición de la cosa a definir

En el ejemplo no se ha incluido, pero también podemos anidar listas de definiciones

Quedando como resultado:

Sardina

Pez osteíctio del orden clupeiformes (Sardina pilchardus) del Mediterráneo y del océano Atlántico

De unos 25 cm. de longitud, verde azulado en el dorso, plateado en los flancos y en el vientre

Se consume fresco o en conserva

Bacalao

Pez marino osteíctio del orden gadiformes (Gadius callarias) que alcanza más de un metro de longitud