Semántica y accesibilidad
Estructura significativa y accesible. Intenta resolver cada ejercicio en el editor antes de revelar la solución.
1
Ejercicio 1
Básico
Envuelve el título del sitio y su navegación en un <header>.
Ver solución sugerida
2
Ejercicio 2
Básico
Usa <main> para envolver el contenido principal de la página.
Ver solución sugerida
3
Ejercicio 3
Básico
Usa <article> para un post de blog independiente.
Ver solución sugerida
4
Ejercicio 4
Intermedio
Agrega un <aside> con contenido relacionado pero secundario.
Ver solución sugerida
5
Ejercicio 5
Básico
Crea un <footer> con derechos de autor.
Ver solución sugerida
6
Ejercicio 6
Intermedio
Agrega alt descriptivo a una imagen decorativa vs. informativa (usa alt vacío si es decorativa).
Ver solución sugerida
7
Ejercicio 7
Intermedio
Agrega aria-label a un botón de ícono sin texto visible.
Ver solución sugerida
8
Ejercicio 8
Intermedio
Usa <nav> con una lista de enlaces dentro para el menú principal.
Ver solución sugerida
9
Ejercicio 9
Avanzado
Estructura una página completa: header, nav, main con 2 articles, aside y footer.
Ver solución sugerida
10
Ejercicio 10
Avanzado
Revisa y corrige el orden de encabezados: h1 seguido de h3 (falta h2).