Listas en HTML: ordenadas, desordenadas y de definición
📚 Contenido de la guía ⌃
- El mapa mental: ¿qué lista usar y cuándo?
- Los 3 tipos de listas en HTML
- — Listas desordenadas (bullets)
- — Listas ordenadas (numeradas)
- Personalizar numeración
- — Listas de definición (concepto → descripción)
- Listas anidadas: crear jerarquías
- Conclusión: una etiqueta simple, tres herramientas poderosas
Las listas son una de las herramientas más antiguas y poderosas de HTML. Desde un simple menú hasta los pasos de un tutorial o la estructura completa de un artículo, tarde o temprano vas a necesitar una lista. Y aunque parezcan sencillas, HTML nos ofrece tres tipos distintos, cada uno con su propósito:
<ul>: listas desordenadas.<ol>: listas ordenadas.<dl>: listas de definición.
En esta guía vas a crear un mapa mental de cuándo usar cada tipo, cómo personalizarlas, y verás ejemplos visuales y prácticos para crear mejores interfaces.
El mapa mental: ¿qué lista usar y cuándo?
Antes de entrar al código, recuerda esta idea:
- Usa
<ul>cuando el orden no importa. - Usa
<ol>cuando el orden SÍ importa (pasos, rankings, instrucciones). - Usa
<dl>cuando quieras explicar términos o emparejar “concepto → descripción”.
Los 3 tipos de listas en HTML
<ul>)
Perfectas para menús, características y colecciones sin prioridad.
<ol>)
Ideales para rankings, pasos de un tutorial o procedimientos.
<dl>)
Hechas para glosarios, FAQs cortas, diccionarios internos.
— Listas desordenadas (bullets)
Las listas desordenadas son las más comunes. Se usan cuando el orden de los elementos no importa. El navegador las muestra con “viñetas” (●, ○, ■).
Ejemplo básico de <ul>:
<ul>
<li>Manzanas</li>
<li>Peras</li>
<li>Bananas</li>
</ul>- Manzanas
- Peras
- Bananas
Úsala para:
- Características de un producto.
- Items de navegación.
- Listas donde el orden no es relevante.
— Listas ordenadas (numeradas)
Las listas ordenadas se usan cuando el orden sí es importante. Los elementos se numeran automáticamente.
Ejemplo básico:
<ol>
<li>Precalentar el horno</li>
<li>Mezclar los ingredientes</li>
<li>Hornear 30 minutos</li>
</ol>- Precalentar el horno
- Mezclar ingredientes
- Hornear 30 minutos
Ideal para:
- Pasos en un tutorial.
- Top 10, rankings o métricas.
- Procesos que deben seguir un orden específico.
Personalizar numeración
<ol type="A">
<li>Opción A</li>
<li>Opción B</li>
</ol>Otros valores posibles: 1, a, A, i, I.
Estás viendo solo el 60% del contenido. ¡Únete a la Membresía Premium! para acceder al contenido completo.
Comentarios y Valoraciones
No hay comentarios aún. ¡Sé el primero en opinar!