Listas ordenadas en HTML

Las listas ordenadas en HTML son aquellas en las que todos los elementos de la lista están ordenados en una secuencia correcta de números, letras o números romanos. Estas listas son muy útiles cuando desea enumerar varios elementos que deben aparecer en un orden específico. En esta guía, compartimos contigo los diferentes ejemplos que ilustran el uso de las listas ordenadas en HTML.

Usando las listas ordenadas en HTML

Las listas ordenadas en HTML se pueden utilizar de muchas formas. Los siguientes cuatro ejemplos muestran algunos de sus escenarios de uso:

Ejemplo #1: Uso simple de listas ordenadas

En este ejemplo aprenderemos a crear una lista ordenada simple en HTML. Para hacer esto, debe pasar por el script HTML que se muestra en la imagen a continuación:

Las listas ordenadas en HTML se pueden crear utilizando la etiqueta "ol". Una vez que aplique esta etiqueta, mencione todos los elementos en esta lista ordenada encerrándolos en la etiqueta "li". En este ejemplo, crearemos una lista ordenada de tres cursos. Así que en este script usamos la etiqueta "ol" seguida de las tres etiquetas "li". Después de guardar este script y ejecutarlo en nuestro navegador, aparecerá la siguiente página web en nuestra pantalla. Puede ver que nuestros cursos específicos se muestran en forma de lista ordenada en esta página web.

Ejemplo #2: Listas ordenadas con letras mayúsculas

No es necesario tener solo la lista ordenada de números. También podemos tener las listas ordenadas de alfabetos. El script HTML que se muestra en la siguiente imagen muestra cómo crear una lista ordenada de caracteres en mayúsculas en HTML.

En este script HTML, mostramos las tres direcciones diferentes en forma de una lista ordenada. Sin embargo, esta vez queremos una lista ordenada de caracteres en mayúsculas. Por lo tanto, usamos un atributo de "tipo" adicional con la etiqueta "ol" para especificar el tipo exacto de la lista ordenada. Establecemos este atributo en "A" para crear una lista ordenada de letras mayúsculas. Luego simplemente mencionamos todos los elementos de esta lista ordenada con la etiqueta "li". Nuestra lista ordenada de letras mayúsculas se muestra en la siguiente imagen:

Nota: Si reemplaza "A" en el script anterior con "a", "I", "i" o "1", nuestra lista ordenada contendrá letras minúsculas, letras romanas mayúsculas, letras romanas minúsculas o números, respectivamente. por defecto hay una lista ordenada en HTML pay off. Por lo tanto, en este caso, no tiene que mencionar explícitamente el tipo "1".

Código de símbolo HTML flecha hacia abajo

Ejemplo #3: Listas ordenadas con punto de inicio aleatorio

A veces no desea que su lista ordenada comience con "1". Más bien, desea tener un punto de partida aleatorio para ello. Para hacer esto, puede usar el script HTML que se muestra en la imagen a continuación:

En este script, queremos que nuestra lista ordenada comience con el número "10". Así que usamos el atributo "inicio" con la etiqueta "ol" y lo equilibramos a "10". Luego mencionamos los tres elementos diferentes con la etiqueta "li". Nuestra lista ordenada con un punto de partida de nuestra elección diferente a "1" se muestra en la siguiente figura:

Ejemplo #4: listas ordenadas anidadas

En este ejemplo, aprenderemos a crear listas ordenadas anidadas, es decir, listas ordenadas dentro de una lista ordenada en HTML. El script HTML para este propósito se muestra en la siguiente figura:

En este ejemplo queremos tener una lista externa ordenada de las diferentes bebidas. Dentro de cada categoría queríamos tener las listas internas ordenadas para mencionar las diferentes bebidas que pertenecen a cada una de esas categorías. Así que anidamos las etiquetas "ol" y "li" en consecuencia en el script HTML que se muestra en la imagen anterior. La siguiente página web muestra nuestra lista ordenada anidada en HTML:

Conclusión

Este tutorial explica cómo usar las listas ordenadas en HTML. Le hemos dado una breve introducción a las listas ordenadas en HTML, seguida de algunos ejemplos que deberían aclarar el concepto. Una vez que tenga una buena comprensión de estos ejemplos, podrá usar listas ordenadas en HTML de manera muy efectiva.

Bordes CSS redondeados