Curso de HTML5

Lección 1 • HTML5 frente a versiones anteriores de HTML

Contrasta HTML5 con HTML 4 y XHTML para aclarar qué cambió y por qué. Establece expectativas para las reglas modernas de sintaxis utilizadas a lo largo del curso.

Lección 2 • Cómo renderizan los navegadores las páginas web

Explica el ciclo de solicitud-respuesta y la construcción del DOM. Fundamenta toda la autoría posterior de HTML en el comportamiento real del navegador.

Lección 3 • Configuración de un entorno de desarrollo

Guía a los estudiantes en la instalación de un editor de código y las herramientas de desarrollo del navegador. Garantiza que cada estudiante tenga un espacio de trabajo funcional antes de escribir cualquier código.

Lección 1 • Entidades HTML y caracteres especiales

Cubre las referencias de caracteres con nombre y numéricas para símbolos y caracteres reservados. Previene errores comunes de representación causados por caracteres no escapados.

Lección 2 • Elementos de sección y puntos de referencia

Introduce header, nav, main, article, section, aside y footer. Los estudiantes reestructuran un documento plano en un diseño semánticamente significativo.

Lección 3 • Listas: ordenadas, no ordenadas y de descripción

Explica ol, ul, li, dl, dt y dd y cuándo usar cada tipo. Refuerza la elección semántica sobre la preferencia visual.

Lección 4 • Encabezados, párrafos y flujo de texto

Cubre h1–h6, p, br y hr y su impacto en el esquema del documento. Conecta la jerarquía adecuada de encabezados con los resultados de accesibilidad y SEO.

Lección 1 • Hiperenlaces y fundamentos de URL

Explica las URL absolutas frente a las relativas, los atributos de anclaje y los destinos de enlace. Permite a los estudiantes conectar correctamente sitios de varias páginas.

Lección 2 • Imágenes y técnicas responsivas

Cubre img, texto alternativo, srcset, sizes y el elemento picture. Los estudiantes implementan patrones de conmutación de resolución y dirección de arte.

Lección 3 • Figuras y leyendas

Enseña figure y figcaption para asociar imágenes con texto descriptivo. Refuerza la agrupación semántica introducida en el capítulo anterior.

Lección 4 • Inserción de audio y vídeo

Introduce los elementos audio y video, alternativas de source y track para subtítulos. Los estudiantes incrustan medios accesibles con soporte para múltiples formatos.

Lección 1 • Fundamentos de la estructura de tablas

Cubre table, tr, th y td y su orden de anidamiento requerido. Establece el marcado correcto antes de introducir mejoras de accesibilidad.

Lección 2 • Cuándo no usar tablas

Aclara el uso indebido de tablas para maquetación y sus consecuencias de accesibilidad. Refuerza la toma de decisiones semánticas establecida en capítulos anteriores.

Lección 3 • Marcado accesible de tablas

Introduce los atributos scope, headers e id para compatibilidad con lectores de pantalla. Conecta la semántica de tablas con el comportamiento de la tecnología de asistencia.

Lección 1 • Etiquetas, conjuntos de campos y accesibilidad

Enseña label, fieldset, legend y aria-describedby para formularios accesibles. Garantiza que cada control esté asociado programáticamente con su etiqueta.

Lección 2 • Estructura y envío de formularios

Cubre los atributos form, action, method y enctype y cómo se envían los datos. Proporciona la base estructural para todas las secciones relacionadas con formularios.

Lección 3 • Tipos de entrada y controles básicos

Introduce text, password, email, number, checkbox, radio y select. Los estudiantes construyen una variedad de controles y comprenden sus comportamientos predeterminados.

Lección 4 • Tipos de entrada y selectores de HTML5

Explora los tipos de entrada date, time, color, range, file y search. Los estudiantes aprovechan la interfaz de usuario nativa del navegador para reducir la necesidad de JavaScript personalizado.

Lección 1 • Pruebas y auditoría de accesibilidad

Introduce herramientas automatizadas, pruebas manuales y flujos de trabajo de prueba con lectores de pantalla. Los estudiantes producen un informe de auditoría de accesibilidad para una página de muestra.

Lección 2 • Roles, estados y propiedades ARIA

Cubre role, aria-label, aria-labelledby, aria-hidden y regiones activas. Los estudiantes añaden ARIA solo donde la semántica nativa es insuficiente.

Lección 3 • Fundamentos de accesibilidad web

Introduce los principios WCAG—perceptible, operable, comprensible, robusto—y sus implicaciones prácticas. Enmarca la accesibilidad como un requisito de diseño, no como una idea tardía.

Lección 4 • Navegación por teclado y gestión del foco

Enseña tabindex, atrapamiento de foco y enlaces de salto de navegación para usuarios de teclado. Los estudiantes verifican la operabilidad completa por teclado de los componentes interactivos.

Lección 1 • API de geolocalización

Cubre getCurrentPosition, watchPosition y el manejo de errores para datos de ubicación. Los estudiantes construyen una característica que muestra las coordenadas del usuario a petición.

Lección 2 • Elemento canvas y dibujo 2D

Introduce el elemento canvas y su contexto de renderizado 2D para dibujo programático. Los estudiantes dibujan formas, texto e imágenes utilizando métodos de contexto de JavaScript.

Lección 3 • API History y navegación de página única

Cubre pushState, replaceState y el evento popstate para la gestión de URL. Los estudiantes actualizan la URL del navegador sin recargas completas de página.

Lección 4 • API de arrastrar y soltar

Enseña draggable, dragstart, dragover y drop para arrastrar y soltar nativo. Los estudiantes construyen una lista ordenable usando solo eventos de arrastrar y soltar de HTML5.

Lección 1 • Estrategias de optimización de imágenes

Cubre la selección de formato, compresión y formatos de nueva generación como WebP y AVIF. Los estudiantes reducen la carga de imágenes manteniendo la calidad visual.

Lección 2 • Consideraciones de seguridad en HTML

Identifica vectores XSS, incrustaciones iframe inseguras y destinos de formulario no seguros. Los estudiantes aplican mitigaciones a nivel HTML para endurecer una aplicación de muestra.

Lección 3 • Carga de recursos y ruta crítica

Explica cómo la colocación de script, link y meta afecta la velocidad de carga de la página. Los estudiantes reordenan los recursos del documento para minimizar el bloqueo de renderizado.

Lección 4 • Fundamentos de SEO a través de HTML

Cubre title, meta description, etiquetas Open Graph y marcado de datos estructurados. Los estudiantes añaden metadatos que mejoran la visibilidad en motores de búsqueda y redes sociales.