Lección 4: Listas

En el momento que sea necesario agrupar elementos podemos acudir a las listas. Si los componentes pueden encajar en un orden caótico, que no es importante su colocación, la llamamos lista desordenada (lista de ingredientes, tareas, películas vistas, archienemigos…). Y cuando es necesario una armonía es llamado lista ordenada (pasos para una receta de cocina, importancia…).

Desordenada

Etiqueta <ul>
Descripción Lista desordenada.
Atributos Globales
Tipo Bloque

Cada elemento de su interior necesitará la etiqueta <li>.

Etiqueta <li>
Descripción Elemento de lista.
Atributos Globales
Tipo Bloque

Un ejemplo de su estructura.

<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
</ul>
  • Aceite
  • Harina
  • Mermelada

Ordenada

Etiqueta <ol>
Descripción Lista ordenada.
Atributos reversed: Dar la vuelta al orden. start: Inicio. type: Tipo de numerador (a, A, i, I y 1).
Tipo Bloque

Un ejemplo de su estructura.

<ol>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>

El resultado será el siguiente.

  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Si quisieramos cambiar el orden descendiente.

<ol reversed>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Indicar por el numera que se iniciará.

<ol start="8">
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

O indicar que tipo de enumeración. Por ejemplo números romanos.

<ol type="I">
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
  3. Dejar que repose

Sublistas

Para lograr elementos en jerarquía, uno dentro de otro, debemos repetir la estructura anterior entre los <li> adecuados.

<ol>
    <li>Precalentar horno</li>
    <li>Mezclar la Harina con agua</li>
    <ul>
        <li>No olvidemos remover bien</li>
        <li> Cuidado con los grumos</li>
    </ul>
    <li>Dejar que repose</li>
</ol>
  1. Precalentar horno
  2. Mezclar la Harina con agua
    • No olvidemos remover bien
    • Cuidado con los grumos
  3. Dejar que repose

Pueden ser mezclados de todas las combinaciones posibles.

<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
    <ul>
        <li>Fresas</li>
        <li>Ciruela</li>
    </ul>
</ul>
  • Aceite
  • Harina
  • Mermelada
    • Fresas
    • Ciruela
<ul>
    <li>Aceite</li>
    <li>Harina</li>
    <li>Mermelada</li>
    <ul>
        <li>Fresas</li>
            <ul>
                <li>Grandes</li>
                <li>Pequeñas</li>
            </ul>
        <li>Ciruela</li>
    </ul>
</ul>
  • Aceite
  • Harina
  • Mermelada
    • Fresas
      • Grandes
      • Pequeñas
    • Ciruela

Un uso muy extendido es utilizar listas desordenadas para realizar menús de navegación o conjuntos de hipervínculos.

4-1 4-2 4-3

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario