HTML semántico para accesibilidad

Cómo estructurar páginas con etiquetas semánticas para mejorar navegación, comprensión y mantenimiento.

📘 Teoría

Criterios prácticos para elegir etiquetas HTML con intención y no por costumbre.

Define regiones claras con header, nav, main, aside y footer para mejorar orientación.

Usa h1-h6 en orden lógico para facilitar lectura rápida y navegación por encabezados.

Enlace para navegar, botón para acción. Cambiarlos rompe expectativas y accesibilidad.

No maquilles listas con div ni datos tabulares con grid sin semántica.

ARIA complementa; no sustituye el HTML nativo cuando existe elemento adecuado.

Markup semántico facilita pruebas, mantenimiento y comprensión entre personas del equipo.

Cómo pasar de layouts con div a estructuras que comunican intención real.

Empieza por identificar bloques de la interfaz: navegación, contenido principal, contenido complementario y acciones.

Sustituye contenedores genéricos por etiquetas semánticas solo cuando representen de verdad ese bloque.

Revisa siempre el resultado con inspector y recorrido de teclado para comprobar que la estructura guía la interacción.

Ejemplo de página mínima con landmarks y jerarquía de títulos coherente.

Ejemplo Demo guiada Convierte una estructura genérica en un layout semántico navegable.

⌄

Reto Reto práctico Reemplaza etiquetas genéricas por semánticas manteniendo el mismo contenido.

⌄

Test

Comprueba tus conocimientos con un test sobre Accesibilidad Web.

Recursos del curso 25