Listas HTML

Menús de ingredientes, rutinas de mañana, bullets de funciones y listas de empaque se escanean mejor como listas. HTML te da dos estructuras cotidianas: listas no ordenadas y ordenadas. Tras la advertencia de plug-ins (historia, sin muestras de código), esta sesión vuelve al marcado práctico que reutilizarás en casi toda página de contenido. Piensa las listas como significado de grupos y secuencias — no como atajo para layout de varias columnas.

Para qué sirven las listas

Una lista marca un grupo de ítems relacionados como grupo. Los navegadores y las tecnologías de asistencia pueden anunciar cuántos ítems hay y recorrerlos uno a uno. Esa estructura ayuda al ojeo, a los esquemas y a las recetas. El significado desaparece si finges bullets con guiones sueltos en párrafos, o si estiras ul solo para empujar texto a columnas visuales. Elige marcado de lista cuando el contenido sea de verdad un conjunto o una secuencia. Guarda el espaciado decorativo y el grid para CSS más adelante.

Respuesta directa

• ul — lista no ordenada (bullets por defecto en el navegador)
• ol — lista ordenada (números por defecto)
• li — cada ítem de la lista
  Anida otro ul u ol dentro de un li cuando necesites subítems. No dejes un li flotando fuera de su lista padre. Las etiquetas de cierre deben anidar en orden inverso a las de apertura, sobre todo al añadir una sublista bajo un paso.

Cuándo usar cada lista

Elige el elemento que coincida con la idea que escribes, no con el aspecto que esperas que CSS añada después. Bullets y números son presentaciones por defecto; la decisión HTML es si el orden forma parte del significado.

Lista no ordenada

Una lista de compra con bullets es la demo clásica de ul. Cada ítem es un li. Empieza aquí cuando los ítems son pares — nombres de fruta, etiquetas de hobby o highlights de funciones que podrían reordenarse sin romper la lección.

Leer la muestra no ordenada

• ul abre el contenedor de lista no ordenada
• Cada li es un ítem de ese grupo
• Las etiquetas de cierre deben anidar bien: termina cada li antes de cerrar el ul
• Los bullets por defecto son estilo del navegador; luego CSS puede cambiar marcadores, pero el significado HTML sigue siendo «conjunto no ordenado»
• li vacíos y cierres faltantes son typos comunes — mira la página pronto para atraparlos

Lista ordenada con sublista anidada

Los pasos numerados suelen necesitar un pequeño grupo de bullets bajo un paso — archivos a crear, herramientas a abrir o ingredientes solo de ese paso. Coloca la lista interna dentro del li de ese paso, no como hermana al lado de todo el ol. Los números externos siguen legibles mientras los bullets internos aclaran el detalle.

Leer la muestra anidada

• El ol externo numera los pasos principales en secuencia
• El segundo li contiene texto introductorio más un ul hijo
• Los li internos pertenecen al ul anidado; ese ul se cierra antes de que cierre el li padre
• El tercer paso continúa la secuencia ordenada externa cuando termina el bloque anidado
• Este patrón escala a nidos más profundos, pero mantén los árboles de principiantes poco profundos para que el orden abrir/cerrar sea obvio
• Si los números se ven «mal», comprueba si un li se cerró demasiado pronto y empujó la lista anidada afuera

Significado primero, estilo después

Los navegadores dibujan bullets y números sin CSS extra. Esa comodidad tienta a abusar de las listas como máquinas de sangría o sidebars falsos. Resiste aquí. Si el contenido es un conjunto o una secuencia, el marcado de lista es la elección semántica correcta incluso antes de restilizar marcadores. Si necesitas cards lado a lado, un grid de nav o columnas de revista, espera las lecciones de CSS y layout estructural — no torzas ul en un framework de página solo porque los menús a veces usan listas después con estilo cuidadoso.

Accesibilidad y hábitos de ojeo

Las listas ayudan a ojear y a que la tecnología de asistencia anuncie frases como «lista de tres ítems». Mantén cada li centrado en una idea cuando puedas. Evita meter párrafos enormes no relacionados en cada ítem salvo que el contenido lo necesite de verdad. Anida solo cuando la jerarquía sea real — anidar falso solo para sangrar confunde a personas y herramientas. Un encabezado corto encima de la lista a menudo aclara de qué va el grupo antes del primer bullet.

Practica en tu editor

1. Haz un ul de tres hobbies (o tres comidas — mantén los ítems cortos).
2. Haz un ol de tres pasos de mañana en el orden en que realmente los haces.
3. Anida un ul pequeño bajo uno de esos li (por ejemplo, archivos a abrir o herramientas a coger).
4. Valida mentalmente: cada li está dentro de un ul u ol; las listas anidadas están dentro de un li.
5. Cambia el tipo de una lista (ul ↔ ol) y pregunta si el significado aún encaja con el contenido.
6. Mira la página en el navegador y confirma que aparecen bullets/números sin escribir CSS todavía.
7. Rompe el nido a propósito una vez, nota lo mal que se ve el outline, luego arregla los cierres.

Errores fáciles

• Escribir li fuera de cualquier ul/ol (ítems huérfanos)
• Usar listas solo para sangrar párrafos al azar o fingir columnas
• Olvidar cerrar listas anidadas en el orden correcto
• Poner un ul anidado como hermano de li en vez de dentro de un li
• Elegir ol para ítems sin secuencia (o ul para números de paso estrictos) sin pensar en el significado
• Copiar marcado de lista de tutoriales solo de layout que tratan ul como grid de menú sin enseñar semántica primero
• Dejar la lista externa sin cerrar tras un bloque anidado largo

Resumen

• ul + li para conjuntos no ordenados (bullets por defecto)
• ol + li para secuencias ordenadas (números por defecto)
• Anida una sublista dentro de un li, no al lado de la lista padre
• Elige el tipo de lista que coincida con el significado
• No uses listas como sustituto de columnas de layout en CSS
• Tras la nota histórica de plug-ins, las listas te devuelven al HTML estructural cotidiano que seguirás reutilizando