TEMA 5. LISTAS

ÍNDICE

Listas

Las listas en html son elementos de alto significado semántico y, por tanto, muy importante para el SEO. Las listas las podemos dividir en dos grandes grupos, listas ordenadas o listas sin ordenar.

Listas ordenadas

Una lista ordenada en HTML es aquella en la que los elementos están enumerados o marcado con algún signo alfanumérico que indique el orden de los elementos.

Se utiliza la etiqueta <ol> para crear listas ordenadas, entre la etiqueta de
apertura y cierre irán los elementos de la lista dentro de una etiqueta <li>

La etiqueta <li> sirve para indicar los elementos de la lista, independientemente de si son ordenadas o desordenadas.

Veamos un ejemplo:

<ol>
        <li>Lunes</li>
        <li>Martes</li>
        <li>Miércoles</li>
        <li>Jueves</li>
        <li>Viernes</li>
        <li>Sábado</li>
        <li>Domingo</li>
</ol>

Listas desordenadas

Una lista no ordenada en HTML es aquella en la que los elementos no están enumerados ni marcados por algún carácter que designe orden. Los elementos están simplemente listados con alguna viñeta predeterminada como puede ser un punto u otro tipo como veremos más adelante.

Se utiliza la etiqueta <ul> contiene a todos los elementos de la lista y dentro de ella irán los atributos que afectan a toda la lista en bloque.

La etiqueta <li> sirve para indicar los elementos de la lista, independientemente de si son ordenadas o desordenadas.

<ul>
        <li>Lunes</li>
        <li>Martes</li>
        <li>Miércoles</li>
        <li>Jueves</li>
        <li>Viernes</li>
        <li>Sábado</li>
        <li>Domingo</li>
</ul>

Listas anidadas

En los elementos <li> de una lista podemos incluir cualquier tipo de elemento, incluido otra lista, ya sea ordenada o desordenada. En la siguiente figura se muestra cómo hacerlo y el resultado que se vería en pantalla:

<ul>
        <li>América</li>
          <ol>
              <li>América Norte</li>
              <li>América Central</li>
              <li>América Sur</li>
          </ol>
          <li>África</li>
            <ol>
              <li>África Septentrional</li>
              <li>África Occidental</li>
              <li>África Central</li>
              <li>África Oriental</li>
              <li>África Meridional</li>
            </ol>
       </ul>

Listas de descripciones

Una lista de descripciones o terminología, es una estructura que consiste de nombres y valores, que normalmente guardan algún tipo de relación.

En versiones previas del estándar, este tipo de lista era conocida como lista de definiciones. HTML5, debido al extendido uso que los autores hacían de ésta para asociar pares nombre/valor de todo tipo, ha cambiado su nombre y propósito al más general lista de descripciones.

En el ejemplo siguiente tenemos un pequeño glosario de arte donde cada término tiene una definición que le corresponde. En esta estructura, el término «miniatura» recive dos definiciones, mientras que los términos «mito» y «leyenda» comparten ambos la misma definición.

Etiqueta <dl>Esta etiqueta se utiliza para crear una lista de definiciones si lo deseamos.
Etiqueta <dt>Esta etiqueta contiene el término que queremos definir.
Etiqueta <dd>Esta etiqueta contiene la definición del término que le precede
<dl>
<dt>Mamifero</dt>
<dd> Especie de animales que maman</dd>
</dl>
<dl>
<dt>Vertebrado</dt>
<dd> Especie de animales que poseen huesos</dd>
</dl>
<dl>
<dt>Reptil</dt>
<dd> Especie de animales que se arrastran por el suelo</dd>
</dl>

Poner viñetas en las listas

Para crear listas con viñetas en HTML se puede hacer mediante el atributo style aunque, como hemos comentado en repetidas ocasiones, usaremos css. Con la propiedad list-style podemos determinar qué tipo de viñeta que se mostrará, en nuestro caso queremos poner viñetas diferentes a los predeterminados. Esta propiedad la aplicaremos sobre <ul>. Los valores que se les puede asignar son, entre otros:

  • disc: este es el valor predeterminado.
  • circle: muestra marcador es un círculo hueco.
  • square: muestra marcador es un cuadrado.
  • decimal: marcador es un número decimal, que comienza con 1.
  • lower-roman: marcador es un número romano en minúscula (i, ii, iii, iv, v, etc.)
  • upper-roman: el marcador es un número romano en mayúscula (I, II, III, IV, V, etc.)

Aprendizaje activo: Crea una lista ordenada con una lista anidada desordenada cuyos marcadores sean cuadrados

Scroll al inicio