Inicio

Curso de HTML

Estructura tu contenido: etiquetas, semántica y formularios.

Tests

Pon a prueba tus conocimientos de HTML.

Lecciones

27
1
Básico
Introducción al 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.
2
Básico
Herramientas para escribir HTML
Configura tu entorno: editor de código, CodePen y herramientas específicas para revisar y validar HTML.
3
Básico
Sintaxis HTML: cómo se escribe el lenguaje
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.
4
Básico
Encabezados (h1 a h6) y párrafos (p)
Qué son las etiquetas h1, h2, h3, h4, h5, h6 y p: jerarquía semántica, buenas prácticas y estructura legible.
5
Básico
Texto semántico en HTML: mark, abbr, kbd, del/ins, dfn, dl, progress y meter
Domina etiquetas de texto menos conocidas para escribir contenido más claro, accesible y profesional.
6
Básico
Listas y enlaces: estructura navegable y contenido útil
Domina ul/ol/dl, anidación y enlaces internos/externos con buenas prácticas de accesibilidad, SEO y seguridad.
7
Básico
Historia y estructura básica del documento HTML
Conoce el origen de HTML y monta un documento mínimo con head y body bien definidos.
8
Básico
Atributos globales en HTML: id, class, title, hidden y data-*
Aprende a usar atributos globales con criterio profesional para estructurar mejor tu HTML, conectar CSS/JS y evitar anti-patrones.
9
Básico
Semántica HTML: estructura con header, main, section
Organiza el contenido con etiquetas semánticas para mejorar accesibilidad, SEO y mantenimiento.
10
Básico
Imágenes: src, alt y tamaños
Aprende a usar imágenes con un `alt` útil, un layout responsive simple y una introducción clara a `picture`.
11
Básico
Formularios básicos en HTML: label, input y validación nativa
Construye formularios claros, accesibles y funcionales con HTML puro.
12
Básico
Tablas HTML: datos bien estructurados y accesibles
Aprende a crear tablas legibles con `caption`, `thead`, `tbody`, `th`, `scope` y buenas prácticas responsive.
13
Medio
Formularios Pro y Validación Nativa
Aprovecha la validación nativa y los controles avanzados de HTML5.
14
Medio
Formularios: controles avanzados y tipos de input en proyectos reales
Domina tipos de input menos usados, select/optgroup/textarea/output y decisiones de UX para formularios sólidos.
15
Medio
Multimedia en HTML: video, audio y embeds seguros
Integra contenido multimedia con enfoque en accesibilidad, rendimiento y seguridad.
16
Medio
SEO técnico en HTML: metadatos, Open Graph y datos estructurados
Mejora indexación y CTR con `title`, `description`, canonical, Open Graph y JSON-LD bien planteados.
17
Pro
Accesibilidad (A11Y) y el estándar ARIA
La accesibilidad (A11Y) es requisito legal y clave para SEO y usabilidad.
18
Pro
Rendimiento web con HTML: Core Web Vitals en la práctica
Optimiza LCP, CLS e INP desde el marcado HTML con decisiones de carga, prioridad y estabilidad visual.
19
Pro
Integración HTML + CSS + JS: orden de carga y ejecución
Aprende cómo conectar estilos y scripts sin bloquear render, con patrones claros para `defer`, `async`, `module` y carga crítica.
20
Pro
Componentes nativos: dialog y popover
Construye modales y capas flotantes accesibles con APIs nativas, sin dependencias innecesarias.
21
Pro
Acordeón nativo con details y summary
Crea bloques desplegables accesibles sin JavaScript y con estructura semántica limpia.
22
Pro
Web Components: Custom Elements, template, slot y Shadow DOM
Construye componentes nativos reutilizables sin framework, con encapsulación real y API clara.
23
Pro
Arquitectura HTML profesional para proyectos reales
Define una estructura HTML escalable para landing, blog, e-commerce y dashboard, con convenciones que facilitan mantenimiento y trabajo en equipo.
24
Pro
Reto práctico: página de artículo con semántica completa
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.
25
Pro
Reto práctico: formulario de contacto accesible
Ejercicio integrador: construye un formulario de contacto completo con agrupación, validación nativa y etiquetas accesibles. Puedes ver la solución para comparar.
26
Pro
Proyecto final de HTML: entrega profesional integrada
Cierra el curso con un proyecto capstone que combine semántica, accesibilidad, SEO y rendimiento en una sola entrega evaluable.
27
Pro
Enhorabuena, despedida y próximos pasos
Cierre del curso: repaso de lo aprendido, proyecto sugerido, consejos para seguir aprendiendo y enlace al curso de CSS.
Página 1 de 1

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .