Primeros pasos

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.

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

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

3.Estructura de una página

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

<!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:

✏️ Practica en vivo

▶ Ver animación

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:

• 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:

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

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

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.

7.Glosario

▶ Ver animación