Ejercicios de Listas (60 ejercicios)

1. Lista no ordenada simple

• Elemento 1
• Elemento 2
• Elemento 3

2. Lista ordenada simple

1. Paso 1
2. Paso 2

3. Lista de definiciones

HTML

Lenguaje de marcado

CSS

Estilos

4. Lista anidada (2 niveles)

• Frutas
  • Manzana
  • Plátano
• Verduras

5. Lista anidada (3 niveles)

1. Fase 1
   1. Subfase A
      1. Paso i

6. Lista con start

5. Cinco
6. Seis

7. Lista con reversed

1. Último
2. Penúltimo

8. Lista con type a (letras minúsculas)

1. a
2. b

9. Lista con type A (letras mayúsculas)

1. A
2. B

10. Lista con type i (romanos minúsculos)

1. i
2. ii

11. Lista con viñetas cuadradas

• Cuadrado
• Otro

12. Lista con viñetas circulares

• Circular

13. Lista con imágenes como viñetas (inline)

• Elemento 1
• Elemento 2

14. Lista de enlaces

• Google
• Bing

15. Lista con párrafos dentro de li

• Párrafo 1 dentro de li

• Párrafo 2

16. Lista de tareas con elementos tachados

• Tarea 1
• Tarea 2

17. Lista tipo checklist (visual)

• [ ] Item 1
• [x] Item hecho

18. Índice con enlaces a secciones

• Sección A
• Sección B

19. Lista con atributos title

• Elemento

20. Lista con id en li

• Primero
• Segundo

21. Lista dentro de tabla

22. Lista de definiciones con múltiples dd

Termino

Def 1

Def 2

23. Lista con elementos dinámicos (simulado)

• Item 1
• Item 2
• Item 3 (generado)

24. Lista con diferentes nodos inline

• Fuerte y énfasis

25. Lista con anchors internos múltiples

• Capítulo 1
• Capítulo 2

26. Lista con elementos vacíos

• Elemento

27. Lista con comentarios dentro

• Item

28. Lista con numeros y texto mezclado

1. 1 - Introducción
2. 2 - Desarrollo

29. Lista con distintos idiomas (lang)

• Hello
• Hola

30. Lista con role accesible

• Accesible

31. Lista de pasos con sublistas

1. Paso 1
   • Subpaso A
2. Paso 2

32. Lista con icons (simulado con emoji)

• 🔹 Item uno
• 🔸 Item dos

33. Lista con CSS inline para sangría

• Sangría

34. Lista de ingredientes (formato receta)

• 200g harina
• 100g azúcar

35. Lista de pasos para cocinar

1. Mezclar
2. Hornear

36. Lista con elementos numerados manualmente

• 1. Primer
• 2. Segundo

37. Lista con etiquetas de tiempo

• 14 Nov 2025 - Evento

38. Lista con tabindex

• Navegable
• Otro

39. Lista de enlaces externos con target

• Ejemplo

40. Lista con elementos largos (texto envuelto)

• Este es un elemento con mucho texto para comprobar el ajuste de líneas en la lista y el comportamiento del li.

41. Lista con data-attributes

• Código A1
• Código B2

42. Lista combinada con tablas pequeñas

• Celda 1

43. Lista con elementos multimedia

• Imagen

44. Lista con enlaces a archivos

• Descargar PDF

45. Lista de reproducción (simulada)

• Track 1
• Track 2

46. Lista vertical vs horizontal (inline)

• Item1
• Item2

47. Lista con elementos ocultos (hidden)

• Visible

48. Lista con aria-label

• Uno
• Dos

49. Lista con separación entre items

• Item con separación
• Otro

50. Lista con checkbox (simulado sin input)

• [ ] Opción 1
• [x] Opción 2

51. Lista con marcado semántico

52. Lista de pasos numerada con descripciones

1. Paso 1: Preparar los ingredientes
2. Paso 2: Cocinar

53. Lista con varios roles ARIA

• Opción 1
• Opción 2

54. Lista con enlaces internos y fragmentos

• Ir a Parte 1
• Ir a Parte 2

55. Lista con elementos ordenados por prioridad

• Alta prioridad
• Baja prioridad

56. Lista con ejemplos de uso de <li> fuera de <ul>

Nota: <li> solo es válido dentro de <ul>/<ol>.

57. Lista con múltiples columnas (simulado)

• 1
• 2
• 3
• 4

58. Lista con longitud grande (programada)

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10

59. Lista con contenido mixto (tabla + párrafo)

• Parrafo

  Celda

60. Lista de resumen con enlaces a recursos

• Recurso 1
• Recurso 2