Listas ordenadas: ol, start, reversed y type
Cree listas numeradas y personalice su secuencia.
Listas ordenadas: ol, start, reversed y type es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué es una lista ordenada?
Una lista ordenada muestra elementos cuya secuencia es importante:
<ol>
<li>Install Node.js</li>
<li>Create project folder</li>
<li>Run npm init</li>
<li>Install dependencies</li>
</ol>El elemento ol
El elemento <ol> (lista ordenada) muestra los elementos de la lista con números secuenciales de forma predeterminada:
<ol>
<li>First step</li>
<li>Second step</li>
<li>Third step</li>
</ol>
<!-- Numbers are generated by the browser -->
<!-- You do not need to type 1. 2. 3. -->
<!-- Reordering items updates numbering automatically -->El atributo start
El atributo start establece el número inicial:
<p>Steps 1-3 are covered in Part One. Continuing from step 4:</p>
<ol start="4">
<li>Configure the database</li>
<li>Set environment variables</li>
<li>Run migrations</li>
</ol>
<!-- Numbers start at 4, 5, 6 -->El atributo reversed
El atributo reversed cuenta hacia atrás en lugar de hacia delante:
<!-- Top 3 countdown -->
<ol reversed>
<li>Bronze: 95 points</li>
<li>Silver: 98 points</li>
<li>Gold: 100 points</li>
</ol>
<!-- Renders: 3. Bronze... 2. Silver... 1. Gold -->
<!-- reversed is a boolean attribute — no value needed -->El atributo type
El atributo type cambia el estilo del marcador:
<ol type="1">...</ol> <!-- 1, 2, 3 (default) -->
<ol type="a">...</ol> <!-- a, b, c (lowercase letters) -->
<ol type="A">...</ol> <!-- A, B, C (uppercase letters) -->
<ol type="i">...</ol> <!-- i, ii, iii (lowercase Roman) -->
<ol type="I">...</ol> <!-- I, II, III (uppercase Roman) -->type en CSS frente a HTML
Prefiera list-style-type de CSS al atributo type de HTML:
<!-- HTML type (still valid): -->
<ol type="A">
<li>Option A</li>
</ol>
<!-- CSS approach (separates concerns): -->
<!--
ol.lettered {
list-style-type: upper-alpha;
}
-->
<ol class="lettered">
<li>Option A</li>
</ol>Atributo value en li
Puede cambiar el número de elementos de lista individuales con value:
<ol>
<li>First item</li>
<li value="10">Tenth item</li> <!-- jumps to 10 -->
<li>Eleventh item</li> <!-- continues: 11 -->
</ol>ol y ul anidados
Las listas se pueden anidar; puede combinar listas ordenadas y desordenadas:
<ol>
<li>
Install tools
<ul>
<li>VS Code</li>
<li>Node.js</li>
</ul>
</li>
<li>Create project</li>
<li>Write code</li>
</ol>Casos de uso semánticos
Use <ol> cuando el orden sea significativo:
- Instrucciones paso a paso
- Resultados clasificados (listas de los 10 primeros)
- Secciones de documentos legales
- Pasos de recetas
- Índice con secciones numeradas
Restablecimiento de contadores en CSS
Los contadores CSS le ofrecen un control total sobre el estilo de numeración de las listas:
ol {
list-style: none;
counter-reset: step;
}
ol li {
counter-increment: step;
}
ol li::before {
content: 'Step ' counter(step) ': ';
font-weight: bold;
color: #0070f3;
}ol para rutas de navegación
Semánticamente, la navegación mediante rutas de navegación es una lista ordenada:
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/docs">Documentation</a></li>
<li><span aria-current="page">HTML Lists</span></li>
</ol>
</nav>Comprobación rápida
¿Qué atributo hace que una lista ol cuente hacia atrás?
Repaso: listas ordenadas
Aspectos esenciales de las listas ordenadas:
<ol>: lista secuencial en la que el orden importastart: inicia la numeración en un número personalizadoreversed: cuenta hacia atrástype: cambia el marcador: 1, a, A, i, Ivalueen<li>: cambia el número de un elemento individual- Use
list-style-typey contadores CSS para obtener más control
Preguntas frecuentes
¿La lección «Listas ordenadas: ol, start, reversed y type» es gratis?
Sí — el texto completo de «Listas ordenadas: ol, start, reversed y type» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Listas ordenadas: ol, start, reversed y type»?
Cree listas numeradas y personalice su secuencia. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Listas ordenadas: ol, start, reversed y type»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Listas no ordenadas: ul y li
- Listas ordenadas: ol, start, reversed y type
- Listas de descripción: dl, dt y dd
- Listas anidadas y estilos de listas