HTML — Intermedio

Dirigido a desarrolladores y maquetadores que ya dominan los fundamentos de HTML y quieren consolidar un dominio profesional del lenguaje, este curso profundiza en el uso riguroso de la semántica HTML5, la accesibilidad web y las técnicas de rendimiento aplicadas al marcado. A lo largo de ocho horas de trabajo práctico, el participante aprenderá a estructurar documentos complejos eligiendo los elementos correctos para cada región de contenido, a construir formularios robustos con validación nativa, a integrar imágenes responsivas y a tomar decisiones fundamentadas sobre la carga de recursos externos; al finalizar, será capaz de producir y auditar HTML que cumpla criterios de calidad semántica, accesibilidad (sin errores críticos en axe DevTools) y rendimiento de carga, listo para su revisión en un equipo de desarrollo real.

1. Diseñar la estructura semántica de una página web completa seleccionando el elemento HTML5 adecuado para cada región de contenido (cabecera, navegación, contenido principal, sección secundaria y pie).
2. Distinguir los casos de uso de <section> y <article> justificando la elección en función de la autonomía y reutilización del contenido.
3. Construir formularios con validación nativa que incluyan múltiples tipos de campo, etiquetas asociadas correctamente y mensajes de error accesibles.
4. Corregir fragmentos HTML con deficiencias de accesibilidad aplicando atributos ARIA básicos y ajustes semánticos hasta superar una auditoría sin errores críticos.
5. Depurar documentos HTML que presentan errores de anidación o semántica incorrecta identificando la causa raíz de cada problema y aplicando la corrección adecuada.
6. Integrar imágenes responsivas con <picture>, srcset y sizes justificando los puntos de corte en función del contexto de uso.
7. Razonar la estrategia de carga de scripts y fuentes externas eligiendo entre async, defer o carga síncrona según su impacto en el renderizado y documentando la decisión.
8. Comparar el uso de <button> nativo frente a un <div> con role="button" valorando la accesibilidad, el comportamiento de teclado y el coste de implementación de cada alternativa.

Bloque 1 — Semántica HTML5 avanzada. Se revisa el modelo de contenido de HTML5 y la función de los elementos de sección (<header>, <nav>, <main>, <aside>, <footer>) para componer la arquitectura de información de una página completa. A partir de ahí se estudian en profundidad <section> y <article>, analizando en casos de uso reales cuándo cada elemento resulta apropiado según el criterio de autonomía y reutilización del contenido, y cómo una jerarquía de encabezados coherente refuerza la semántica del documento.

Bloque 2 — Formularios con validación nativa y accesibilidad. Se construyen formularios que combinan al menos cinco tipos de campo (email, tel, date, number y texto con pattern), prestando especial atención a la asociación explícita entre <label> y control mediante for/id, al uso de atributos de restricción (required, min, max, pattern) y a la redacción de mensajes de error que resulten comprensibles para lectores de pantalla. Se incorporan también los atributos ARIA necesarios cuando la validación nativa no cubre el caso.

Bloque 3 — Accesibilidad: auditoría y corrección. El bloque arranca con una introducción práctica a axe DevTools como herramienta de auditoría y repasa los errores críticos más frecuentes: imágenes sin texto alternativo descriptivo, controles sin etiqueta, landmarks ausentes y uso de role redundante o incorrecto. A continuación se trabaja con fragmentos reales con deficiencias, aplicando correcciones semánticas y atributos ARIA básicos (aria-label, aria-describedby, aria-live) hasta que el documento supera la auditoría. Se dedica también atención al debate <button> nativo frente a <div role="button">, contrastando el comportamiento de teclado, la semántica implícita y el coste de mantenimiento de cada opción.

Bloque 4 — Rendimiento de carga: imágenes y recursos externos. Se estudia el elemento <picture> junto con srcset y sizes en <img> para servir imágenes adaptadas al dispositivo y al contexto, justificando los puntos de corte en función del diseño. El bloque cierra con la gestión de recursos externos: se analizan los efectos de async, defer y la carga síncrona sobre el proceso de renderizado, y se practica la documentación de decisiones de carga como parte del estándar de calidad del proyecto.

• Navegador moderno con DevTools integradas (Chrome o Edge recomendados para usar la extensión axe DevTools).
• Extensión axe DevTools instalada en el navegador (versión gratuita suficiente).
• Editor de código con soporte HTML (Visual Studio Code recomendado, con las extensiones HTML Hint y axe Accessibility Linter).
• Servidor de desarrollo local ligero (p. ej., extensión Live Server para VS Code) para previsualizar los ejercicios.
• Conexión a internet para cargar recursos externos durante los ejercicios de rendimiento.

Para aprovechar este curso el participante debe haber completado HTML01 (HTML — Iniciación) o poseer un dominio equivalente de los fundamentos: estructura básica de un documento HTML, elementos de texto, listas, enlaces, imágenes y tablas simples, así como familiaridad con las herramientas de desarrollo del navegador.