Curso de HTML5

Lección 1 • HTML5 vs. Versiones Anteriores de HTML

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

Lección 2 • Cómo los Navegadores Renderizan Páginas Web

Explica el ciclo de solicitud-respuesta y la construcción del DOM. Fundamenta toda la autoría HTML posterior 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 herramientas de desarrollo del navegador. Asegura que cada estudiante tenga un espacio de trabajo funcional antes de escribir 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 renderizado causados por caracteres sin escapar.

Lección 2 • Elementos de Seccionamiento 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 resultados de accesibilidad y SEO.

Lección 1 • Hipervínculos y Fundamentos de URL

Explica las URL absolutas vs. relativas, los atributos de anclaje y los destinos de enlace. Permite a los estudiantes conectar sitios de múltiples páginas correctamente.

Lección 2 • Imágenes y Técnicas Responsivas

Cubre img, texto alt, srcset, sizes y el elemento picture. Los estudiantes implementan patrones de cambio 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 • Incrustación de Audio y Video

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

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 mal uso de tablas para diseño y sus consecuencias de accesibilidad. Refuerza la toma de decisiones semánticas establecida en capítulos anteriores.

Lección 3 • Marcado de Tablas Accesible

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, Fieldsets y Accesibilidad

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

Lección 2 • Estructura de Formularios y Envío

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 Centrales

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

Lección 4 • Tipos de Entrada y Selectores HTML5

Explora los tipos de entrada date, time, color, range, file y search. Los estudiantes aprovechan la IU nativa del navegador para reducir las necesidades 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 en vivo. 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 manejo de errores para datos de ubicación. Los estudiantes construyen una característica que muestra las coordenadas del usuario bajo 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 usando métodos de contexto de JavaScript.

Lección 3 • API de Historial y Navegación de Una Sola Página

Cubre pushState, replaceState y el evento popstate para 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 eventos drop para DnD 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 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 formularios inseguros. 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.