Listas con HTML

Una lista en una libreta
Las listas con HTML son muy usadas en el desarrollo web moderno

Esta clase pertenece al curso de HTML y CSS, y partiremos desde la clase anterior. Si no sabes de dónde partimos, te ruego revises las clases anteriores.

Las listas son un elemento básico de HTML y muy utilizado en las páginas webs. Por ello, vamos a aprender cómo se trabajan con este lenguaje de marcas. Veremos las listas ordenadas, luego las desordenadas, más tarde veremos cómo se anidan y finalmente haremos unos ejercicios para ver que efectivamente nos ha quedado claro el contenido de esta clase. ¡Vamos a ello!

¿Qué encontrarás aquí?

Listas ordenadas HTML.

Las listas se ordenan con la etiqueta <ol>. Cada elemento de la lista, lleva la etiqueta <li>. Por ejemplo:

<div>
    <h1>Ranking FIFA Marzo 2021</h1>
    <ol>
        <li>Bélgica</li>
        <li>Francia</li>
        <li>Brasil</li>
        <li>Inglaterra</li>
        <li>Portugal</li>
    </ol>
</div>
Ejemplo de lista ordenada
Aquí tenemos un ejemplo de lista ordenada con el código HTML que acabamos de ver

Como puedes ver, si yo simplemente uso las etiquetas <ol> y <li> sin atributos, el orden empezará por el número 1 e irá sumando una unidad a los siguientes elementos de la lista.

¿Qué ocurre si quiero que empiece por un número distinto de 1? Es decir, que empiece por el número que yo quiero, el 10, por ejemplo. Pues usaríamos el atributo start. Los atributos son elementos que me permiten modificar o configurar las etiquetas de HTML como yo desee. Se colocan dentro de la etiqueta de apertura, y tras ellos siempre sigue un igual (=) con unas comillas dobles (" ") y dentro de dichas comillas el valor que quiera darle a dicho atributo. Lo vamos a comprender muy bien con este ejemplo.

<div>
    <h1>Ranking FIFA Marzo 2021</h1>
    <ol start="10">
        <li>Bélgica</li>
        <li>Francia</li>
        <li>Brasil</li>
        <li>Inglaterra</li>
        <li>Portugal</li>
    </ol>
</div>
Ejemplo de lista ordenada con atributo start
Gracias al uso de este atributo ahora la lista empieza por el valor que nosotros queremos…

Pongamos que ahora queremos ordenar con letras en vez de con números. Puedo hacer uso del atributo type, y en función del valor que le de, me ordenará con letras mayúsculas o minúsculas.

<div>
    <h1>Ranking FIFA Marzo 2021</h1>
    <ol type="a">
        <li>Bélgica</li>
        <li>Francia</li>
        <li>Brasil</li>
        <li>Inglaterra</li>
        <li>Portugal</li>
    </ol>
</div>
Ejemplo de lista ordenada con letras minúsculas en HTML
Aquí podemos ver la lista ordenada con HTML con letras minúsculas

Si pongo <ol type="A"> las letras que regirán el orden de esta lista estarán en mayúsculas.

Si quisiera realizar la ordenación con números romanos, usaré para el atributo type el valor de "I" si quiero los números romanos en mayúsculas el de "i" si quiero los números romanos en minúsculas.

<div>
    <h1>Ranking FIFA Marzo 2021</h1>
    <ol type="I">
        <li>Bélgica</li>
        <li>Francia</li>
        <li>Brasil</li>
        <li>Inglaterra</li>
        <li>Portugal</li>
    </ol>
</div>
Ejemplo de lista ordenada con números romanos en mayúsculas con HTML
¿A qué le vas pillando el tranquillo a esto de las listas ordenadas con HTML?

Por defecto, HTML ordena siempre desde abajo hacia arriba, es decir, pongamos que estamos haciendo una lista ordenada numérica que empieza por el valor 1. Siempre el primer elemento tendrá el valor número 1, el siguiente el 2 etc. ¿Cómo hago si quiero que la ordenación sea al revés? ¿Es decir, que el primer elemento tenga el valor 5, el segundo el 4, el tercero el 3, el cuarto el 2 y el quinto el 1?

Para ello tengo el atributo reversed. Este atributo cuando está presente le indica a la lista que el orden de la lista ordenada será invertido y cuándo no esté presente será por defecto. Fíjate en el ejemplo de la lista ordenada numérica de antes, cuando este atributo no estaba presente. Fíjate aquí ahora que sí que está presente. ¿Ves la diferencia?

<div>
    <h1>Ranking FIFA Marzo 2021</h1>
    <ol reversed>
        <li>Bélgica</li>
        <li>Francia</li>
        <li>Brasil</li>
        <li>Inglaterra</li>
        <li>Portugal</li>
    </ol>
</div>
Ejemplo de lista ordenada numérica con HTML con atributo reversed
¿Ves? Sonaba más difícil de lo que luego ha sido…

Listas desordenadas

Ahora bien, podemos hacer listas desordenadas. Para ello, podemos utilizar la etiqueta <ul>. Veamos un ejemplo de lista desordenada:

<div>
    <h1>Ciudades de España para visitar</h1>
    <ul>
        <li>Toledo</li>
        <li>Sevilla</li>
        <li>Santander</li>
        <li>Salamanca</li>
        <li>Cáceres</li>
    </ul>
</div>
Ejemplo de lista desordenada con puntos
Empezamos con las listas desordenadas… No hay mucha diferencia con las listas ordenadas, ¿verdad?

¿Te das cuenta que utiliza puntos en la lista no? Puedo utilizar circulitos blancos, usando el atributo type con el valor "circle".

<div>
    <h1>Ciudades de España para visitar</h1>
    <ul type="circle">
        <li>Toledo</li>
        <li>Sevilla</li>
        <li>Santander</li>
        <li>Salamanca</li>
        <li>Cáceres</li>
    </ul>
</div>
Ejemplo de lista desordenada con círculos HTML
Recuerdas para lo que nos servían los atributos, ¿verdad?

Si usas el atributo type con el valor "square", tendrás cuadraditos negros en la lista desordenada. Si usas el atributo type con el valor disc tendrás como resultado los circulitos negros que nos salían por defecto cuando hacemos una lista desordenada con la etiqueta <ul> pero sin usar ningún atributo.

Más adelante veremos que el estilo de las listas (que si pongo circulito, que si pongo cuadrado…) también lo podremos manejar con CSS.

Listas anidadas

Venga. Vamos a meterle un poco de «complejidad» a esto. ¿Podemos anidar listas? Por supuesto. Con este ejemplo lo verás mejor ya que con anidar me refiero a meter una lista dentro de otra, y así tenemos distintos niveles. En el primer nivel tendríamos en este ejemplo los países y en el segundo la lista de jugadores de fútbol de leyenda de cada país.

<div>
    <h1>Jugadores de fútbol de leyenda</h1>
    <ul>
        <li>España</li>
            <ul type="square">
                <li>Casillas</li>
                <li>Xavi</li>
                <li>Iniesta</li>
            </ul>
        <li>Francia</li>
            <ul type="disc">
                <li>Zidane</li>
                <li>Henry</li>
                <li>Barthez</li>
            </ul>
        <li>Brasil</li>
            <ul type="circle">
                <li>Ronaldo</li>
                <li>Pelé</li>
                <li>Ronaldinho</li>
            </ul>
    </ul>
</div>
Ejemplo de listas anidadas con HTML
Ejemplo de listas anidadas con HTML. Aquí es importante tener el código bien indentado para no liarse.

Ejercicios

Ejercicio 1

Haz una lista ordenada de los cinco primeros países que vas a visitar en los próximos años. En la lista ordenada usarás números.

Ejercicio 2

Utilizando la lista anterior, invierte el orden de los números.

Ejercicio 3

Haz una lista ordenada con letras en mayúscula de tus comidas favoritas.

Ejercicio 4

Utilizando la lista ordenada del ejercicio 3, ahora ordena tus comidas favoritas con números romanos en mayúscula.

Ejercicio 5

Haz una lista desordenada de tus películas favoritas. Utilizarás para el estilo de la lista cuadraditos negros.

Ejercicio 6

Usando como ejemplo la lista desordenada del ejercicio 5, ahora utiliza como estilo de la lista puntos o circulitos negros.

Ejercicio 7

Haz una lista anidada de ciudades que quieres visitar en los próximos cinco años de al menos tres países distintos.

Ejercicios resueltos

Aquí podrás consultar cómo debería verse tu pantalla si has hecho bien el ejercicio. Te dejaré un enlace en cada ejercicio para que puedas consultar el código (a fin de no hacer esta clase excesivamente larga en cuanto a tamaño).

Ejercicio 1 resuelto

Solución del ejercicio 1 del curso de HTML
¿Te salió? ¡Seguro que sí!

Puedes consultar el código en nuestro GitHub.

Ejercicio 2 resuelto

Solución del ejercicio 2 de listas HTML
¿Te acordabas del atributo reversed?

Puedes consultar el código en nuestro GitHub.

Ejercicio 3 resuelto

Ejercicio 3 de listas de HTML resuelto
¿Te entró hambre? Ya ves que las listas de HTML no son difíciles para nada…

Puedes consultar el código en nuestro GitHub.

Ejercicio 4 resuelto

Solución ejercicio 4 Listas HTML
Las listas en HTML sólo requieren un poco de práctica…

Seguro que lo has hecho bien, pero si quieres revisar el código, puedes consultarlo en nuestro GitHub.

Ejercicio 5 resuelto

Solución ejercicio 5 listas HTML
¡Vamos, que ya eres casi un/a experto/a en listas con HTML!

Si quieres revisar el código, échale un ojo a nuestro GitHub.

Ejercicio 6 resuelto

Solución ejercicio 6 HTML
Este es el estilo por defecto de las listas desordenadas en HTML

Si quieres echarle un vistazo al código, revisa nuestro GitHub.

Ejercicio 7 resuelto

Solución del ejercicio 7 de la clase de listas de HTML
Este era el ejercicio más difícil, pero las listas anidadas de HTML tampoco son para tanto, es cuestión de indentar bien el código y tenerlo claro.

Haciendo este ejercicio te habrás dado cuenta de la importancia de una buena indentación del código para no liarse. Además te habrás dado cuenta que HTML cambia el estilo de forma automática de los estilos de la lista desordenada para ayudarte a diferenciar una lista principal (países, en este caso) de la lista secundaria (ciudades de cada país). Si quieres consultar el código, puedes revisarlo en nuestro GitHub.

Índice del curso

Recuerda que para seguir nuestro curso de HTML y CSS sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!

Si has podido realizar todo lo que hemos visto en la clase sin problemas, perfecto. En caso de duda, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeHTMLCSS en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo)  por TwitterInstagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios.  Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.