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.
No hay lecciones para este filtro.
Página 1 de 1
Roadmap
Desarrollo Web
Ruta principal de frontend, frameworks y stack de desarrollo web profesional.
Lenguajes pilares del desarrollador frontend