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.

HTML (HyperText Markup Language) es el lenguaje que estructura la información de una página web.

No es un lenguaje de programación: define qué es cada parte del contenido (título, párrafo, lista, imagen, formulario).

Aprender HTML te permite construir la base sobre la que luego añades estilo con CSS y comportamiento con JavaScript.

La primera web fue creada por Tim Berners-Lee en 1991 en el CERN y mostraba información y enlaces entre documentos.

  • El lenguaje que da estructura y significado a la Web.
  • HTML define la estructura de una página: títulos, párrafos, enlaces, imágenes, listas y formularios. Para escribir todo eso se usan etiquetas y atributos, que aprenderás en las siguientes lecciones (Sintaxis y Encabezados y párrafos).
  • Cada elemento HTML describe el propósito del contenido, lo que ayuda a navegadores, buscadores y lectores de pantalla.
  • Un buen HTML es semántico: usa etiquetas correctas para que el contenido tenga sentido.
  • HTML es la base: sin él no hay contenido estructurado.

¿Qué es HTML?

El lenguaje que da estructura y significado a la Web.

HTML define la estructura de una página: títulos, párrafos, enlaces, imágenes, listas y formularios. Para escribir todo eso se usan etiquetas y atributos, que aprenderás en las siguientes lecciones (Sintaxis y Encabezados y párrafos).

Cada elemento HTML describe el propósito del contenido, lo que ayuda a navegadores, buscadores y lectores de pantalla.

Un buen HTML es semántico: usa etiquetas correctas para que el contenido tenga sentido.

  • HTML es la base: sin él no hay contenido estructurado.
  • La semántica mejora el SEO y la accesibilidad.
  • El objetivo es que el contenido sea claro incluso sin estilos.

Un poco de historia

De un laboratorio a todo Internet.

HTML nace en el CERN a finales de los 80 como una forma de enlazar documentos científicos.

Tim Berners-Lee creó la primera web en 1991 y propuso el concepto de hipervínculos para conectar información.

Con el tiempo, HTML evolucionó hasta HTML5, ampliando elementos para vídeo, audio y aplicaciones modernas.

Qué vas a aprender en este curso

Un roadmap real para seguir paso a paso.

El curso está pensado para que avances en orden: primero la base, luego contenido y formularios, y al final temas más avanzados como accesibilidad, SEO y rendimiento.

  • Herramientas: editor de código, CodePen y validador HTML.
  • Sintaxis HTML: etiquetas, atributos, elementos vacíos, comentarios y anidamiento.
  • Encabezados y párrafos: h1 a h6, p y jerarquía correcta.
  • Estructura del documento: doctype, head, body y metadatos.
  • Semántica: header, main, section, article, nav, footer.
  • Imágenes: img, alt, picture y buenas prácticas.

Cómo usar los ejemplos y los retos

Aprovecha al máximo cada lección.

Cada lección incluye bloques de código que puedes editar y ejecutar en el navegador. Son ejemplos reales: cambia el texto, añade etiquetas o quita partes y observa el resultado.

Los retos son ejercicios con instrucciones claras: debes completar el código para que pase las comprobaciones. Si te atascas, puedes ver pistas y, al final, la solución recomendada. No copies y pegues sin más: intenta primero tú y usa la solución para comparar.

  • Ejemplos: edita el código, ejecuta y observa. Sirven para experimentar sin miedo.
  • Retos: completa lo que se pide; las comprobaciones te dirán si está bien.
  • Cada lección tiene al menos dos retos para fijar lo aprendido.
  • Al final del curso hay retos prácticos más largos con solución visible para afianzar.

¿Por qué aprender HTML?

Porque todo lo demás se apoya en él.

Si entiendes HTML, puedes crear páginas claras y bien organizadas y comunicarte mejor con diseñadores y desarrolladores.

HTML te obliga a pensar en la estructura, lo que mejora la calidad de cualquier proyecto web. Es el primer paso para dominar CSS, JavaScript y cualquier framework.

  • Aprendes a estructurar contenido real.
  • Mejora tu criterio al diseñar interfaces.
  • Te da una base sólida para lo demás.
HTML
01

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.

Código del tema: HTML

📘 Teoría

¿Qué es HTML?

El lenguaje que da estructura y significado a la Web.

HTML define la estructura de una página: títulos, párrafos, enlaces, imágenes, listas y formularios. Para escribir todo eso se usan etiquetas y atributos, que aprenderás en las siguientes lecciones (Sintaxis y Encabezados y párrafos).

Cada elemento HTML describe el propósito del contenido, lo que ayuda a navegadores, buscadores y lectores de pantalla.

Un buen HTML es semántico: usa etiquetas correctas para que el contenido tenga sentido.

  • HTML es la base: sin él no hay contenido estructurado.
  • La semántica mejora el SEO y la accesibilidad.
  • El objetivo es que el contenido sea claro incluso sin estilos.
Estructura mínima
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Mi primera página</title>
</head>
<body>
  <h1>Hola, Web</h1>
  <p>Esto es HTML en acción.</p>
</body>
</html>

Un poco de historia

De un laboratorio a todo Internet.

1

HTML nace en el CERN a finales de los 80 como una forma de enlazar documentos científicos.

2

Tim Berners-Lee creó la primera web en 1991 y propuso el concepto de hipervínculos para conectar información.

3

Con el tiempo, HTML evolucionó hasta HTML5, ampliando elementos para vídeo, audio y aplicaciones modernas.

Qué vas a aprender en este curso

Un roadmap real para seguir paso a paso.

El curso está pensado para que avances en orden: primero la base, luego contenido y formularios, y al final temas más avanzados como accesibilidad, SEO y rendimiento.

  • Herramientas: editor de código, CodePen y validador HTML.
  • Sintaxis HTML: etiquetas, atributos, elementos vacíos, comentarios y anidamiento.
  • Encabezados y párrafos: h1 a h6, p y jerarquía correcta.
  • Estructura del documento: doctype, head, body y metadatos.
  • Semántica: header, main, section, article, nav, footer.
  • Imágenes: img, alt, picture y buenas prácticas.
  • Formularios: label, input, validación nativa y agrupación con fieldset.
  • Tablas: thead, tbody, caption y accesibilidad.
  • Formularios avanzados: tipos de input, pattern, datalist.
  • Multimedia: audio y video.
  • SEO básico: title, meta description y estructura.
  • Accesibilidad: ARIA, roles y buenas prácticas.
  • Rendimiento: recursos y carga.
  • Elementos modernos: dialog, popover, details.
  • Web Components: introducción a custom elements y Shadow DOM.
  • Retos prácticos: ejercicios más complejos con solución.
  • Cierre: despedida y próximos pasos (CSS y más).

Cómo usar los ejemplos y los retos

Aprovecha al máximo cada lección.

Cada lección incluye bloques de código que puedes editar y ejecutar en el navegador. Son ejemplos reales: cambia el texto, añade etiquetas o quita partes y observa el resultado.

Los retos son ejercicios con instrucciones claras: debes completar el código para que pase las comprobaciones. Si te atascas, puedes ver pistas y, al final, la solución recomendada. No copies y pegues sin más: intenta primero tú y usa la solución para comparar.

  • Ejemplos: edita el código, ejecuta y observa. Sirven para experimentar sin miedo.
  • Retos: completa lo que se pide; las comprobaciones te dirán si está bien.
  • Cada lección tiene al menos dos retos para fijar lo aprendido.
  • Al final del curso hay retos prácticos más largos con solución visible para afianzar.

¿Por qué aprender HTML?

Porque todo lo demás se apoya en él.

Si entiendes HTML, puedes crear páginas claras y bien organizadas y comunicarte mejor con diseñadores y desarrolladores.

HTML te obliga a pensar en la estructura, lo que mejora la calidad de cualquier proyecto web. Es el primer paso para dominar CSS, JavaScript y cualquier framework.

  • Aprendes a estructurar contenido real.
  • Mejora tu criterio al diseñar interfaces.
  • Te da una base sólida para lo demás.

🧪 Aprende probando

Ejemplo Documento mínimo Ejemplo de estructura básica. Edita el título y el párrafo y ejecuta.

🧰 Recursos

¿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 .