HTML semántico y accesibilidad

Curso de iniciación a HTML5 semántico orientado a perfiles que construyen páginas web y necesitan estructurarlas correctamente para navegadores, lectores de pantalla y motores de búsqueda. El alumno aprende a crear documentos HTML5 con metadatos esenciales, organizar el contenido con la jerarquía de encabezados correcta, construir navegación accesible con listas y enlaces, incorporar imágenes con atributos de accesibilidad, estructurar datos tabulares con tablas semánticas y diseñar formularios HTML5 con validación nativa. Al finalizar, el participante será capaz de construir y validar documentos HTML5 bien formados, accesibles y optimizados para su indexación.

Al finalizar el curso, el participante será capaz de:

• Crear documentos HTML5 con estructura semántica correcta y metadatos esenciales
• Implementar jerarquía de contenido utilizando encabezados, párrafos y elementos de énfasis apropiados
• Construir navegación accesible con listas, enlaces internos/externos y anclas
• Incorporar imágenes con atributos de accesibilidad y formatos web modernos
• Desarrollar tablas HTML con estructura semántica correcta para datos tabulares
• Diseñar y validar formularios HTML5 con campos apropiados, atributos de validación nativa y mejora de experiencia de usuario

1. Estructura semántica de un documento HTML5 Declaración DOCTYPE y elemento html; elementos semánticos de estructura: header, main, nav, section, article, aside, footer; metadatos en head: meta charset, viewport, description, og:title; título y favicon; diferencia entre elementos de bloque y de línea; validador W3C
2. Jerarquía de contenido y elementos de texto Encabezados h1-h6: reglas de jerarquía y uso correcto de un único h1; párrafos y saltos de línea; elementos de énfasis semántico: strong vs b, em vs i; blockquote y cite; abbr y dfn; elementos de código: code, pre, kbd
3. Navegación y enlaces Listas ul, ol y dl: estructura y casos de uso; elemento nav y su rol en la semántica del documento; enlaces internos, externos y anclas con id; atributos href, target, rel (noopener, nofollow); breadcrumb básico; skip navigation para accesibilidad
4. Imágenes y contenido multimedia Elemento img: atributos src, alt (descriptivo vs decorativo), width/height; formatos modernos: WebP, AVIF y su soporte; elemento picture con srcset y sizes para imágenes responsive; figure y figcaption; introducción a lazy loading con loading="lazy"; SVG inline básico
5. Tablas semánticas Cuándo usar tablas (datos tabulares) y cuándo no (layout); estructura semántica: thead, tbody, tfoot, th con scope; caption; atributos colspan y rowspan; accesibilidad de tablas complejas con headers y id; relación con WCAG
6. Formularios HTML5 Tipos de input HTML5: text, email, tel, number, date, password, checkbox, radio, select, textarea; atributos de validación: required, minlength, maxlength, pattern, min, max; label asociado con for/id; fieldset y legend para grupos; placeholder vs. label; mensajes de validación personalizados con setCustomValidity; botones: submit, reset, button

• Navegador moderno con DevTools (Chrome o Firefox)
• Editor de código (VS Code recomendado con extensión Live Preview)
• Acceso al validador W3C online para las prácticas de validación

Ninguno requerido. No es necesario saber programar ni tener experiencia previa con desarrollo web. Es útil haber navegado por internet y entender intuitivamente qué es una página web y qué contiene, pero no es un requisito formal.