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.
- Precalentar horno
- Mezclar la Harina con agua
- 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>
- Precalentar horno
- Mezclar la Harina con agua
- 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>
- Precalentar horno
- Mezclar la Harina con agua
- 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>
- Precalentar horno
- Mezclar la Harina con agua
- 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>
- Precalentar horno
- Mezclar la Harina con agua
- No olvidemos remover bien
- Cuidado con los grumos
- 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 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>

Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios