Primeros pasos

⏱ 20 minutos
📶 Nivel: principiante
🧩 Incluye ejercicio

🎯 Al terminar esta lección podrás…

Explicar qué es HTML y para qué sirve.
Preparar tu editor y crear tu primer archivo.
Reconocer las partes de una página y de una etiqueta.

1.Qué es HTML

HTML (HyperText Markup Language, «lenguaje de marcado de hipertexto») es el lenguaje con el que se define el contenido y la estructura de una página web: qué es un título, qué es un párrafo, dónde va una imagen o un enlace.

HTML no es un lenguaje de programación: no calcula ni toma decisiones. Solo describe el contenido mediante etiquetas, y el navegador se encarga de mostrarlo.

📌 Nota · Los tres lenguajes de la web

Una página web se construye con tres piezas que se complementan:

Lenguaje	Función	Analogía con una casa
HTML	Estructura y contenido	Los muros y las habitaciones
CSS	Aspecto visual	La pintura y la decoración
JavaScript	Comportamiento e interacción	La instalación eléctrica

En este curso empezamos por el cimiento: HTML.

2.Herramientas que necesitas

Para escribir HTML basta con dos programas, y ambos son gratuitos:

Un editor de código. Recomendamos Cursor, un editor moderno con IA integrada que resalta el código con colores y avisa de errores (guía oficial de instalación y uso). Si prefieres uno clásico, Visual Studio Code funciona igual, y cualquier editor de texto simple también sirve.
Un navegador web. Chrome, Firefox, Edge o Safari. Con él verás el resultado.

Crea tu primer archivo

Crea una carpeta llamada mi-curso-html.
Dentro, crea un archivo llamado index.html.
Pega el código de la siguiente sección y guárdalo con Ctrl + S.
Haz doble clic en el archivo: se abrirá en tu navegador.

⚠️ Importante · La extensión

El archivo debe terminar en .html. Si lo guardas como index.html.txt, el navegador lo mostrará como texto plano. En Windows, activa «Extensiones de nombre de archivo» en el Explorador para verlo.

3.Estructura de una página

Toda página HTML comparte el mismo esqueleto básico. Este es el mínimo que debes memorizar:

index.html

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>¡Hola, mundo!</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

Veamos qué hace cada parte:

Etiqueta	Para qué sirve
`<!doctype html>`	Indica al navegador que el documento usa HTML moderno (HTML5). Va siempre primero.
`<html lang="es">`	Contiene toda la página. El atributo `lang` declara el idioma, útil para lectores de pantalla y buscadores.
`<head>`	Información sobre la página que no se muestra en pantalla: título, codificación, configuración.
`<meta charset="UTF-8">`	Permite mostrar correctamente tildes, eñes y símbolos.
`<meta name="viewport"…>`	Hace que la página se adapte bien a pantallas de móvil.
`<title>`	El texto de la pestaña del navegador y el título en los resultados de búsqueda.
`<body>`	Todo lo que el visitante sí ve: textos, imágenes, enlaces.

💡 Consejo · Head y body

Una forma fácil de recordarlo: el head es la «cabeza» que piensa y se prepara; el body es el «cuerpo» que se muestra al mundo.

✏️ Practica en vivo

Se escriben un párrafo y un subtítulo nuevos en el editor y aparecen de inmediato en el resultado — Así funciona cada editor «Practica en vivo» de las lecciones: lo que escribes se ve al instante.

✏️ Edita tu primera página

Código (edítalo)

<h1>¡Hola, mundo!</h1>
<p>Esta es mi primera página web.</p>
<p>Cambia el texto, añade otro párrafo o envuelve una palabra con <strong>strong</strong>.</p>
<!-- Los comentarios no se ven -->

Resultado

Aquí solo escribes lo que va dentro de <body>. Prueba a borrar una etiqueta de cierre y observa cómo reacciona el navegador: es la mejor forma de aprender a reconocer los errores.

4.Anatomía de una etiqueta

El HTML se compone de elementos. La mayoría tiene una etiqueta de apertura, un contenido y una etiqueta de cierre:

<aapertura

href="pagina.html"atributo

Visitarcontenido

</a>cierre

Etiqueta de apertura <a>: indica qué tipo de elemento comienza.
Atributo href="…": añade información extra con el formato nombre="valor". Va dentro de la etiqueta de apertura.
Contenido: lo que el visitante ve.
Etiqueta de cierre </a>: igual que la de apertura, pero con una barra /.

Etiquetas anidadas

Los elementos pueden contener otros elementos. Eso se llama anidar, y exige cerrar primero lo que se abrió al final, como cajas dentro de cajas:

Anidación correcta

<p>Este texto tiene una palabra <strong>importante</strong>.</p>

Etiquetas vacías

Algunos elementos no tienen contenido ni etiqueta de cierre, por ejemplo <br> (salto de línea), <hr> (línea horizontal) e <img> (imagen). Los veremos en las próximas lecciones.

5.Comentarios

Los comentarios son notas para ti y para otras personas que lean el código. El navegador los ignora y no se muestran en la página.

Comentario

<!-- Esto es un comentario: el navegador no lo muestra -->
<p>Este texto sí se ve.</p>

📌 Nota

Los comentarios son visibles para cualquiera que inspeccione el código de la página. Nunca escribas en ellos contraseñas ni datos privados.

6.Errores frecuentes

Todos los cometemos al empezar. Si algo no se ve como esperabas, revisa esta lista:

Olvidar cerrar una etiqueta (<p> sin </p>): el resto de la página puede verse alterado.
Anidar mal: <p><strong>texto</p></strong> es incorrecto; se cierra en orden inverso.
Olvidar las comillas en los valores de atributos.
No guardar el archivo antes de recargar el navegador (F5).
Extensión equivocada: .txt en lugar de .html.

🔍 Ejemplo · Cómo se ve un error

Si escribes <h1>Hola</h2>, la etiqueta de cierre no coincide con la de apertura. HTML suele ser «tolerante» y no muestra un aviso, pero el resultado puede ser impredecible. Un buen editor te lo señalará.

📒 Apuntes para llevar

HTML describe la estructura y el contenido; CSS da el aspecto y JavaScript el comportamiento.
Un archivo HTML necesita la extensión .html y se abre en el navegador.
El esqueleto básico es doctype → html → head + body.
Lo que está en head no se ve; lo que está en body sí.
Un elemento = etiqueta de apertura + contenido + etiqueta de cierre.
Los atributos tienen la forma nombre="valor" y van en la etiqueta de apertura.
Las etiquetas se anidan y se cierran en orden inverso al que se abrieron.
Los comentarios  no se muestran en la página.

7.Glosario

Término	Significado
Etiqueta	Marca entre `< >` que indica el tipo de contenido.
Elemento	Conjunto de etiqueta de apertura, contenido y etiqueta de cierre.
Atributo	Dato adicional de un elemento, con formato `nombre="valor"`.
Anidar	Colocar un elemento dentro de otro.
Navegador	Programa que interpreta el HTML y lo muestra como página.
Editor de código	Programa donde escribes y guardas tus archivos.

Se responden cuatro preguntas y cada una muestra al instante si es correcta y por qué — Las preguntas dicen al instante si acertaste y explican la respuesta.

🧠 Comprueba lo aprendido

Elige una respuesta en cada pregunta. Verás al instante si acertaste y por qué.

¿Qué describe HTML?

¿Qué parte del documento no se muestra en la página?

El <head> guarda información sobre la página (título, codificación). Lo visible va en <body>.

¿Cuál es el cierre correcto de <p>?

La etiqueta de cierre repite el nombre con una barra: </p>.

Tu archivo se abre como texto plano en el navegador. ¿Qué pasó probablemente?

Si el nombre termina en .html.txt, el navegador lo trata como texto. Activa la visualización de extensiones.

Tu progreso se guarda en este navegador y se refleja en el índice del curso.

🚀 ¡Ahora te toca!

La práctica es lo que fija lo aprendido. Pasa al ejercicio y crea tu primera página.

Ir al ejercicio