Ejercicios de HTML para Principiantes: 20 Prácticas Resueltas
Practicar es la única forma real de aprender a programar. Esta colección de ejercicios de HTML está pensada para que, incluso si empezás desde cero, puedas escribir tu primera línea de código hoy mismo y avanzar paso a paso hasta dominar las etiquetas, formularios, tablas y elementos multimedia que forman la base de cualquier página web.
Cada uno de los 20 ejercicios incluye una explicación clara del objetivo, el código de ejemplo y un desafío para que lo resuelvas por tu cuenta. Si te trabás, el código resuelto está disponible en todos los casos.
📋 Los 20 Ejercicios de HTML
| # | Ejercicio | Qué vas a practicar |
|---|---|---|
| 1 | Documento HTML Básico | Estructura mínima con !DOCTYPE, html, head, body + lang, meta charset y comentarios |
| 2 | Encabezados HTML h1 a h6 | Jerarquía de títulos con ejemplo realista, malas prácticas y SEO de headings |
| 3 | Párrafos y Enlaces | <p>, <a>, enlaces internos con #id, mailto:, tel:, seguridad target="_blank", <br>, <hr>, <pre> |
| 4 | Listas Ordenadas y Desordenadas | <ol>, <ul>, <li>, listas anidadas, atributos type/start/reversed, listas de definición <dl> |
| 5 | Insertar Imágenes | <img> con src/alt/width/height + <figure>/<figcaption>, loading="lazy", srcset/sizes, imágenes rotas |
| 6 | Crear Tablas en HTML | table, thead, tbody, tfoot, colspan, rowspan, estilizado con CSS |
| 7 | Formulario Básico con input y label | form, input, label, method/action, validación HTML5, fieldset/legend, tipos de input |
| 8 | Formulario con Select y Radio Buttons | <select>, <optgroup>, radio buttons con checked/value, <textarea> multilínea |
| 9 | Formulario con Checkboxes | Checkboxes múltiples, checked, name[] arrays, <input type="hidden">, <input type="file"> |
| 10 | Enlaces con Imágenes | <a> + <img>, galería clickeable, title tooltip, target="_blank" seguro, enlace a WhatsApp |
| 11 | Enlaces de Anclaje | Navegación interna con #id, scroll suave CSS, menú sticky, #top para volver arriba, anclaje entre páginas |
| 12 | Insertar Videos con iframe | YouTube con parámetros (start, end, controls), Vimeo, <video> local con múltiples fuentes, shorts responsive |
| 13 | Insertar Audio en HTML | Múltiples fuentes (MP3/OGG/WAV), audio de fondo autoplay muted loop, podcast con controlsList, audio desde CDN |
| 14 | Comentarios en HTML | Documentar secciones, comentarios multilínea con TODO, debugging por aislamiento, comentarios condicionales de IE (histórico) |
| 15 | Enlaces de Descarga | download con nombre personalizado, descarga de imágenes, archivos ZIP, documentos Word y TXT |
| 16 | Etiquetas div y span | Cards con Flexbox, estilizado inline con <span>, layout completo con divs, comparativa bloque vs inline vs inline-block |
| 17 | Etiquetas Semánticas | Blog con <nav>/<main>/<aside>/<time>/<address>, portfolio con <figure>, comparativa divs vs semántica, documentación con <section> |
| 18 | Enlaces Absolutos y Relativos | Rutas con ./, ../, /, estructura de carpetas realista, <base href="">, protocolo implícito // |
| 19 | Insertar Páginas con iframe | Iframe responsive (aspect-ratio + padding-bottom), sandbox para seguridad, loading="lazy", mapa de Google Maps |
| 20 | Formulario con Fecha y Número | date, time, datetime-local, month, week, range, color, validación HTML5 (required/pattern/min/max), fieldset/legend, datalist |
¿Por qué practicar HTML con ejercicios?
HTML es el primer lenguaje que todo desarrollador web debería aprender. No es un lenguaje de programación — es un lenguaje de marcado — pero sin él no existe ninguna página web. Cada sitio que visitás, desde Google hasta Instagram, está construido sobre una base de HTML.
Hacer ejercicios de HTML te permite:
- Fijar los conceptos mucho más rápido que solo leyendo teoría.
- Cometer errores y corregirlos en un entorno controlado, que es justamente donde más se aprende.
- Ganar confianza para después pasar a CSS, JavaScript y frameworks más avanzados.
- Construir un portfolio de prácticas que demuestran tu progreso.
No necesitás instalar nada: todos los ejercicios incluyen un editor online integrado para que escribas y ejecutes el código directamente desde el navegador.
Preguntas Frecuentes sobre Ejercicios de HTML
¿Necesito saber algo antes de empezar estos ejercicios de HTML?
No. Estos ejercicios están diseñados para principiantes absolutos. El primer ejercicio empieza con la estructura más básica de un documento HTML y cada práctica va sumando un concepto nuevo de forma progresiva. Solo necesitás un navegador web y ganas de aprender.
¿Cuánto tiempo se tarda en completar los 20 ejercicios?
Depende de tu ritmo, pero en promedio cada ejercicio lleva entre 10 y 20 minutos. Dedicando una hora por día podés completar toda la colección en menos de una semana. Lo importante no es la velocidad sino entender cada concepto antes de pasar al siguiente.
¿Estos ejercicios de HTML son suficientes para conseguir trabajo?
Estos ejercicios cubren los fundamentos esenciales de HTML, que son el primer paso obligatorio. Para un perfil profesional vas a necesitar complementarlos con CSS, JavaScript, y eventualmente frameworks como React o Vue. Pero todo empieza acá: sin una base sólida de HTML no podés avanzar a nada más.
¿Puedo hacer los ejercicios en cualquier orden?
Están numerados en orden de dificultad creciente. Se recomienda seguirlos en orden, especialmente si empezás desde cero, porque cada ejercicio asume que ya manejás los conceptos de los anteriores. Dicho esto, si ya tenés algo de experiencia podés saltear directamente al tema que más te interese.
¿Necesito un editor de código especial para los ejercicios de HTML?
No. Cada ejercicio incluye un editor CodePen integrado donde podés escribir y ver el resultado al instante. Si preferís trabajar localmente, cualquier editor de texto sirve (incluso el Bloc de Notas), aunque se recomienda VS Code por su soporte para desarrollo web.
¿Qué hago si me trabo en un ejercicio?
Todos los ejercicios incluyen el código resuelto. La recomendación es que primero intentes resolverlo por tu cuenta durante al menos 15 minutos. Si después de ese tiempo no te sale, revisá la solución, entendé por qué funciona así, y volvé a intentarlo sin mirar.
Ya hiciste los ejercicios y entendés las bases. Ahora generá una página web completa con DivZone AI y analizá cómo se combinan todas las etiquetas que practicaste en un proyecto real. Es la mejor forma de ver HTML en acción.
- Historia de HTML: Historia de HTML: Origen y Evolución (1989–Hoy)
- Estructura básica: Estructura básica de un documento HTML
- Etiquetas fundamentales: Elementos y etiquetas en HTML
- Etiquetas semánticas: Etiquetas semánticas en HTML5