Hay ocasiones en las cuales es necesario colocar una lista numerada en HTML. Es un elemento muy útil para organizar ideas, darles prioridad y mostrarlas al usuario. Por esta razón, a continuación te explico cómo inserta una lista numerada en HTML.
Las listas numeradas pueden ser de distintos tipos, pueden ir en orden inverso o comenzar en un número específico. Sigue leyendo para conocer cómo realizar todo esto.
1. Cómo crear una lista numerada
2. Cómo agregar más elementos
3. Cómo empezar en otro número
4. Cómo especificar el tipo de lista
5. Cómo revertir el orden
1. ¿Cómo crear una lista numerada en HTML?
Insertar una lista numerada en código HTML es muy sencillo. Se realiza de la siguiente manera:
<ol> <li>Elemento X</li> <li>Elemento Y</li> <li>Elemento Z</li> </ol>
El resultado será el siguiente:
- Elemento X
- Elemento Y
- Elemento Z
2. ¿Cómo agregar más elementos a una lista numerada en HTML?
Para agregar más elementos a una lista, solo debemos agregar una fila li dentro de nuestra lista, en el lugar que queremos. Por ejemplo, a continuación agregamos el Elemento A después del Elemento X:
<ol> <li>Elemento X</li> <li>Elemento A</li> <li>Elemento Y</li> <li>Elemento Z</li> </ol>
El resultado será el siguiente:
- Elemento X
- Elemento A
- Elemento Y
- Elemento Z
3. ¿Cómo empezar una lista numerada en otro número en HTML?
Si queremos que nuestra lista numerada empiece en otro número que no sea el 1, debemos hacer lo siguiente. En este caso, vamos a empezar la lista con el número 10.
<ol start="10"> <li>Elemento X</li> <li>Elemento A</li> <li>Elemento Y</li> <li>Elemento Z</li> </ol>
El resultado será el siguiente:
- Elemento X
- Elemento A
- Elemento Y
- Elemento Z
Podemos colocar cualquier número para empezar la lista numerada.
4. ¿Cómo cambiar el tipo de lista numerada en HTML?
Con el código HTML, podemos crear diferentes tipos de listas numeradas: 1, I, i, A, a. Esto lo podemos especificar de la siguiente manera:
<ol type="i"> <li>Elemento X</li> <li>Elemento A</li> <li>Elemento Y</li> <li>Elemento Z</li> </ol>
En este caso, hemos usado el tipo de numeración romana minúscula. El resultado será el siguiente:
- Elemento X
- Elemento A
- Elemento Y
- Elemento Z
- Elemento X
- Elemento A
- Elemento Y
- Elemento Z
5. ¿Cómo revertir el orden de la lista numerada en HTML?
En HTML5 podemos revertir el orden de la lista numerada. Así que en vez de comenzar 1, 2, 3, 4, 5 comenzaremos 5, 4, 3, 2, 1. Esto lo realizamos de la siguiente manera:
<ol reversed="reversed">
<li>Elemento X</li>
<li>Elemento A</li>
<li>Elemento Y</li>
<li>Elemento Z</li>
</ol>El resultado será el siguiente:
- Elemento X
- Elemento A
- Elemento Y
- Elemento Z
Entonces…
Así de fácil es insertar listas numeradas con HTML. Estás preparado para cualquier tipo de lista.
Escríbenos en los comentarios si tienes alguna duda.
