Curso de HTML

Qué es HTML, un poco de historia, qué vas a aprender en este curso y cómo usar los ejemplos y los retos.

Configura tu entorno: editor de código, CodePen y herramientas específicas para revisar y validar HTML.

Aprende la estructura de las etiquetas, los atributos, los elementos vacíos, el anidamiento y los comentarios. Sin esto no se puede escribir HTML correctamente.

Qué son las etiquetas h1, h2, h3, h4, h5, h6 y p: jerarquía semántica, buenas prácticas y estructura legible.

Domina etiquetas de texto menos conocidas para escribir contenido más claro, accesible y profesional.

Domina ul/ol/dl, anidación y enlaces internos/externos con buenas prácticas de accesibilidad, SEO y seguridad.

Conoce el origen de HTML y monta un documento mínimo con head y body bien definidos.

Aprende a usar atributos globales con criterio profesional para estructurar mejor tu HTML, conectar CSS/JS y evitar anti-patrones.

Organiza el contenido con etiquetas semánticas para mejorar accesibilidad, SEO y mantenimiento.

Aprende a usar imágenes con un `alt` útil, un layout responsive simple y una introducción clara a `picture`.

Construye formularios claros, accesibles y funcionales con HTML puro.

Aprende a crear tablas legibles con `caption`, `thead`, `tbody`, `th`, `scope` y buenas prácticas responsive.

Aprovecha la validación nativa y los controles avanzados de HTML5.

Domina tipos de input menos usados, select/optgroup/textarea/output y decisiones de UX para formularios sólidos.

Integra contenido multimedia con enfoque en accesibilidad, rendimiento y seguridad.

Mejora indexación y CTR con `title`, `description`, canonical, Open Graph y JSON-LD bien planteados.

La accesibilidad (A11Y) es requisito legal y clave para SEO y usabilidad.

Optimiza LCP, CLS e INP desde el marcado HTML con decisiones de carga, prioridad y estabilidad visual.

Aprende cómo conectar estilos y scripts sin bloquear render, con patrones claros para `defer`, `async`, `module` y carga crítica.

Construye modales y capas flotantes accesibles con APIs nativas, sin dependencias innecesarias.

Crea bloques desplegables accesibles sin JavaScript y con estructura semántica limpia.

Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.

Define una estructura HTML escalable para landing, blog, e-commerce y dashboard, con convenciones que facilitan mantenimiento y trabajo en equipo.

Ejercicio integrador: construye una página de artículo con header, navegación, contenido principal, aside y footer. Puedes ver la solución para comparar.

Ejercicio integrador: construye un formulario de contacto completo con agrupación, validación nativa y etiquetas accesibles. Puedes ver la solución para comparar.

Cierra el curso con un proyecto capstone que combine semántica, accesibilidad, SEO y rendimiento en una sola entrega evaluable.

Antes de maquetar un cartel decides la jerarquía: qué es el titular, qué es el subtítulo, qué es información secundaria.

En la pestaña Red de casi cualquier web de un estudio de diseño verás lo mismo: lo que más pesa son las imágenes y los vídeos.

Inscribirse en un taller, pedir presupuesto, buscar en un catálogo: los formularios son la parte de la web donde el usuario habla.

Un código postal con cuatro cifras, un móvil con una letra, un DNI sin letra: el formulario los acepta si no le dices cómo tienen que ser.

Cierre del curso: repaso de lo aprendido, proyecto sugerido, consejos para seguir aprendiendo y enlace al curso de CSS.