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, prioridades, ganadores…).

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

Menú de navegación

Para realizar un conjunto de hipervínculos ordenador que pueda ser utilizado para navegar por el sitio debemos seguir una estructura cerrada (que a día de hoy es un estándar). La etiqueta <nav>, en su interior una lista desordenada que a su vez contiene hipervínculos en cada elemento.

Etiqueta <nav>
Descripción Contenido de seccionamiento para navegación.
Atributos Globales
Tipo Bloque

Más adelante descubriremos que ons las etiquetas de Contenido de seccionamiento, de momento lo declararemos para indicar donde se encuentra nuestro menú.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Portafolio</a></li>
    <li><a href="#">¿Hablamos?</a></li>
  </ul>
</nav>

4-1 4-2 4-3 4-4

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Escribe el primer comentario