La Etiqueta OL

La etiqueta <ol> (Ordered List) se utiliza para crear listas ordenadas en HTML, donde los elementos se muestran con una numeración secuencial (números, letras o símbolos). Es ideal para:

• Pasos de una receta.

• Índices jerárquicos.

• Instrucciones o procesos secuenciales.

• Ranking de elementos.

Sintaxis básica

<ol>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ol>

Resultado:

1. Elemento 1

2. Elemento 2

3. Elemento 3

Atributos principales

Atributo	Descripción
type	Tipo de numeración: 1 (números), A (mayúsculas), a (minúsculas), I (romanos), i (romanos en minúscula).
start	Número inicial de la lista (ej: start="5" → 5, 6, 7...).
reversed	Invierte el orden de numeración (ej: 3, 2, 1).

Ejemplos prácticos

Numeración con letras mayúsculas

<ol type="A">
  <li>Primer paso</li>
  <li>Segundo paso</li>
</ol>

Resultado:
A. Primer paso
B. Segundo paso

Lista invertida

<ol start="5" reversed>
  <li>Quinto elemento</li>
  <li>Cuarto elemento</li>
</ol>

Resultado:
5. Quinto elemento
4. Cuarto elemento

Numeración romana

<ol type="I">
  <li>Introducción</li>
  <li>Desarrollo</li>
  <li>Conclusión</li>
</ol>

Resultado:
I. Introducción
II. Desarrollo
III. Conclusión

Listas anidadas

<ol>
  <li>Capítulo 1
    <ol type="a">
      <li>Sección 1.1</li>
      <li>Sección 1.2</li>
    </ol>
  </li>
  <li>Capítulo 2</li>
</ol>

Resultado:

1. Capítulo 1
   a. Sección 1.1
   b. Sección 1.2

2. Capítulo 2

Personalización con CSS

Aunque el atributo type es útil, CSS ofrece mayor control sobre el estilo de la numeración:

Cambiar el estilo de viñetas

ol {
  list-style-type: upper-roman; /* Tipo de numeración */
}

Numeración con colores

ol {
  color: #2ecc71; /* Color de los números */
}
li {
  color: #333; /* Color del texto */
}

Numeración personalizada (usando ::before)

css

ol.custom {
  list-style: none;
  counter-reset: mi-contador;
}
ol.custom li::before {
  content: "Paso " counter(mi-contador) ": ";
  counter-increment: mi-contador;
  font-weight: bold;
  color: #e74c3c;
}

html

<ol class="custom">
  <li>Preparar los ingredientes</li>
  <li>Mezclar</li>
</ol>

Resultado:

Accesibilidad y buenas prácticas

• Estructura semántica: Usa <ol> solo para listas ordenadas (evita usarla como decoración).

• Contenido claro: Los elementos <li> deben ser descriptivos.

• Navegadores antiguos: El atributo type es compatible con todos los navegadores, pero CSS ofrece más flexibilidad.

Errores comunes

1. Usar <ol> para listas no ordenadas:
   Si el orden no importa, usa <ul> en su lugar.

2. Anidar sin jerarquía:
   Evita listas demasiado complejas sin estructura clara.

3. Olvidar cerrar <li>:
   Aunque HTML5 lo permite, es buena práctica cerrar las etiquetas.

<ol> vs <ul>

<ol>	<ul>
Listas ordenadas (con numeración).	Listas no ordenadas (con viñetas).
Ideal para secuencias.	Ideal para ítems sin orden.

Ejemplo avanzado: Lista de tareas con CSS

<ol class="tareas">
  <li>Desayunar</li>
  <li>Reunión de trabajo</li>
  <li>Hacer ejercicio</li>
</ol>

<style>
  .tareas {
    list-style: none;
    counter-reset: tareas-contador;
  }
  .tareas li {
    margin: 10px 0;
    padding-left: 35px;
    position: relative;
  }
  .tareas li::before {
    content: counter(tareas-contador);
    counter-increment: tareas-contador;
    background: #3498db;
    color: white;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
  }
</style>

Resultado:

1. Desayunar
2. Reunión de trabajo
3. Hacer ejercicio

Conclusión

La etiqueta <ol> es esencial para estructurar contenido secuencial en HTML. Combinada con CSS, permite crear listas ordenadas visualmente atractivas y funcionales. Úsala en:

• Tutoriales paso a paso.

• Recetas de cocina.

• Índices de documentos.

• Cualquier contexto donde el orden importe.

Ejemplo final:

<ol type="1" start="10">
  <li>Décimo elemento</li>
  <li>Undécimo elemento</li>
</ol>

Resultado:

10. Décimo elemento
11. Undécimo elemento

¡Domina las listas ordenadas y mejora la claridad de tu contenido!