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

Una página empieza con significado

Crearemos una página para un taller de ideas. Antes de los colores, necesita decir qué significa cada parte.

Rutas de aprendizaje12 min

Vamos a descubrir juntos

  1. 1

    HTML marca contenido y relaciones: <p> es un párrafo y <h1> es un encabezado de nivel 1. Un elemento suele tener apertura, contenido y cierre; los atributos van en la apertura. Escribe <p>Hola</p>, en vez de dibujar la página con espacios.

  2. 2

    <!doctype html> solicita el modo moderno de representación. <html lang="es"> indica el idioma principal; usa pt-BR o en al traducir. <head> reúne metadatos: charset UTF-8, viewport y <title>, que nombra la pestaña. <body> contiene el contenido de la página.

  3. 3

    El título de la pestaña y el encabezado visible cumplen funciones distintas. La vista previa muestra el cuerpo con estilos de lectura y elementos limitados; no ejecuta JavaScript ni reproduce todos los recursos de una página real.

  4. 4

    Abre “Mis archivos y GitHub”, cambia el encabezado y el párrafo y actualiza la vista previa. Descarga el .html y ábrelo en el navegador. En computadora, edita texto plano UTF-8: index.html, no index.html.txt; guarda y recarga para ver cambios.

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

Reconocer la estructura de un documento HTML y guardar una primera página.

Ahora te toca

Taller de descubrimientos

Lee, predice, prueba

<title>Taller</title> está en head; <h1>Bienvenida</h1> está en body.
Prepara tus respuestas y comprueba cuando estés listo.
Una pausa para entender

¿La vista previa aprueba automáticamente toda la accesibilidad?

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

Crea una presentación ficticia de dos frases. Cambia el título de la pestaña y el h1 por separado y anota dónde aparece cada cambio.

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.