27B - 🔢 Listas Ordenadas en HTML: Cómo Usarlas

---

Temas tratados en esta entrada

• Ordenado lista HTML
• Lista HTML Ordenada - El Atributo Tipo
• El atributo start
• Listas anidadas

---

Ordenado lista HTML

Las listas ordenadas en HTML son elementos que permiten organizar información en un formato secuencial o jerárquico. Se utilizan comúnmente para mostrar una serie de elementos donde el orden es relevante, como instrucciones, clasificaciones o cualquier conjunto de datos que necesite ser presentado en una secuencia lógica.

En HTML, las listas ordenadas se crean utilizando la etiqueta <ol>, que significa "ordered list". Cada elemento de la lista se define con la etiqueta <li>, que corresponde a "list item". La enumeración de los elementos se maneja automáticamente por el navegador, comenzando desde 1, a menos que se especifique otro tipo de conteo mediante el atributo type.

Un uso común de las listas ordenadas es en la presentación de pasos a seguir, donde el orden es esencial para lograr un resultado exitoso, como recetas o instrucciones de montaje.

Ejemplo

1. Precalentar el horno a 180°C.
2. Mezclar los ingredientes secos en un bol.
3. Batir los huevos y añadir a la mezcla.
4. Verter la mezcla en un molde y hornear durante 30 minutos.
5. Dejar enfriar antes de servir.

Lista HTML Ordenada - El Atributo Tipo

El atributo type en una lista ordenada permite especificar el tipo de marcador que se utilizará para enumerar los elementos de la lista. Por defecto, el navegador utiliza números arábigos (1, 2, 3, etc.), pero puedes cambiar este comportamiento utilizando diferentes valores para el atributo type.

Los valores más comunes para el atributo type son:

• 1: números arábigos (1, 2, 3, ...)
• a: letras minúsculas (a, b, c, ...)
• A: letras mayúsculas (A, B, C, ...)
• i: números romanos en minúscula (i, ii, iii, ...)
• I: números romanos en mayúscula (I, II, III, ...)

Este atributo es útil cuando deseas presentar la información de manera diferente, adaptando el estilo y la claridad según el contexto.

Ejemplo

1. Seleccionar los ingredientes adecuados.
2. Preparar la mesa de trabajo.
3. Comenzar a cocinar siguiendo la receta.

El atributo start

Por defecto, una lista ordenada en HTML comienza a contar desde el número 1. Sin embargo, puedes utilizar el atributo start para especificar un número diferente desde el cual comenzar la enumeración. Este atributo es útil en situaciones donde deseas continuar una secuencia numérica de una lista anterior o simplemente empezar desde un número específico.

El atributo start se agrega a la etiqueta <ol> y permite que el primer elemento de la lista se inicie desde el número que indiques. Por ejemplo, si deseas que una lista comience en 50, puedes establecer start="50".

Ejemplo

Ejemplo de lista ordenada que comienza en 50:

50. Coffee
51. Tea
52. Milk

Ejemplo de lista ordenada con números romanos que también comienza en 50:

50. Coffee
51. Tea
52. Milk

Listas anidadas

Las listas ordenadas en HTML también pueden ser anidadas, lo que significa que puedes tener una lista ordenada dentro de otra lista ordenada o dentro de una lista desordenada. Esto es útil para crear jerarquías en la información y para organizar elementos relacionados.

Para crear una lista anidada, simplemente coloca una nueva etiqueta <ol> o <ul> dentro de un elemento de lista existente <li>.

Ejemplo

1. Desayuno
   1. Jugo
   2. Tostadas
   3. Café
2. Almuerzo
   1. Ensalada
   2. Arroz
   3. Carne
3. Cena
   1. Sopa
   2. Pescado
   3. Postre

Ir al índice