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

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

Un ejemplo de su estructura.

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

Ordenada

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.

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>

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>

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>

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>

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>

<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>

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.

Más adelante descubriremos que las etiquetas llamadas Contenido de seccionamiento, de momento 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

¿Te ayudo?

• 1 café: ¡Gracias por el apoyo! Te ayudo a que esta web siga estando online pagando los servidores.
• 2 cafés: Respondo a una duda en los comentarios.
• 4 cafés: Te corrijo una actividad y te envío feedback.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

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

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario