Rullst AcademyRullst Academy/Lección
HTML semántico y accesibilidad · Lección 06 / 10

Datos con relaciones claras

El programa tiene actividades y duraciones. Una tabla puede hacer explícita esa relación.

Rutas de aprendizaje12 min

Vamos a descubrir juntos

  1. 1

    Usa table para datos relacionados en filas y columnas, no para colocar la página. Caption nombra la tabla. Tr crea una fila; th marca encabezados y td celdas de datos.

  2. 2

    En esta tabla simple, “Actividad” y “Minutos” son th con scope="col". Los nombres de actividades son th con scope="row". Una duración puede asociarse con su columna y actividad.

  3. 3

    Thead agrupa filas de encabezado y tbody el cuerpo. No sustituyen th ni sus relaciones. Empieza con una tabla pequeña; los encabezados complejos necesitan otro análisis y no se resuelven solo por tener scope.

  4. 4

    Lee una celda fuera del orden visual: “Probar, Minutos, 15”. ¿Sigue teniendo sentido? Añade un caption específico y revisa una pantalla estrecha. Nuestra revisión busca algunos elementos, pero no valida todas las asociaciones.

Taller de HTML: escribir, observar, revisar

Edita HTML en “Mis archivos y GitHub” y actualiza la vista previa. Usa elementos de estudio y estilos de lectura: scripts, CSS propio y navegación externa quedan desactivados. Solo route.svg del kit se muestra como imagen.

Ir a mi HTML

Estas comprobaciones no son validación completa de HTML ni auditoría WCAG. Revisa contenido, teclado, zoom y tecnologías de asistencia; registra lo pendiente.

Enlaces oficiales y siguiente paso

✦
TU MISIÓN

Construir una tabla simple con leyenda y encabezados.

Ahora te toca

Taller de descubrimientos

Lee, predice, prueba

La tabla tiene columnas Actividad y Minutos; la fila Probar contiene 15.
Prepara tus respuestas y comprueba cuando estés listo.
Una pausa para entender

¿Una tabla debe colocar menú y pie?

Necesito una pista

Compara la intención con el significado de los elementos; la apariencia sola no demuestra accesibilidad.

Cargando tu camino…

Llévatelo contigo

Añade una tercera actividad y comprueba sus encabezados. Explica por qué los materiales anteriores funcionan mejor como lista.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Rullstpetbot

La IA puede equivocarse. Consulta el material de la lección.