Nivel: Básico · HTML · 20 minutos · Necesitas: una computadora y un navegador (no hace falta internet)

Al terminar este tutorial tendrás un archivo index.html en tu computadora que se abre en el navegador y muestra un título, un párrafo, una lista y un enlace. Es la misma base sobre la que se construye cualquier sitio web. No vas a instalar nada complicado: solo un editor de texto.

Resultado final: una página llamada «Mi primera página» con tu nombre, tres cosas que te gustan y un enlace a tu sitio favorito.

Paso 1: Crea una carpeta y abre un editor de texto

Crea una carpeta nueva en el Escritorio llamada mi-pagina. Ahí guardarás todo.

Para escribir el código necesitas un editor de texto plano, no un procesador de textos como Word (Word agrega formato oculto que el navegador no entiende). Opciones:

Visual Studio Code (gratis, Windows/Mac/Linux): el recomendado; colorea el código y avisa errores.
Bloc de notas en Windows: sirve para empezar.
TextEdit en Mac: antes de escribir, ve a Formato → Convertir en texto normal. Si no lo haces, guardará el archivo como texto enriquecido.

Computadora portátil con un editor de código abierto mostrando un archivo HTML — Un editor de texto plano (como VS Code) es todo lo que necesitas.

Paso 2: Guarda un archivo llamado index.html

En el editor crea un archivo nuevo y guárdalo de inmediato dentro de mi-pagina con el nombre index.html. Guardarlo antes de escribir hace que VS Code reconozca que es HTML y empiece a colorear.

Ojo en Windows: el Bloc de notas puede guardarlo como index.html.txt sin que lo veas. En el cuadro de guardar, cambia «Tipo» a Todos los archivos. Para comprobarlo, activa en el Explorador Vista → Extensiones de nombre de archivo.

Archivo .html dentro de una carpeta junto a un cuadro de diálogo para guardar — El archivo se guarda en la carpeta del proyecto y su nombre termina en .html.

Paso 3: Escribe la estructura mínima

Copia este código en el archivo. Es el esqueleto que toda página HTML necesita:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, soy Ana</h1>
  </body>
</html>

Qué hace cada parte:

Línea	Para qué sirve
`<!DOCTYPE html>`	Le dice al navegador que es HTML moderno.
`<html lang="es">`	Envuelve toda la página e indica que está en español (ayuda a lectores de pantalla y traductores).
`<meta charset="UTF-8">`	Permite tildes y eñes. Sin esto, «página» puede verse como «pÃ¡gina».
`<title>`	El texto que aparece en la pestaña del navegador.
`<body>`	Todo lo que se ve en la página va aquí dentro.

Cambia «Ana» por tu nombre y guarda (Ctrl + S o Cmd + S).

Paso 4: Ábrelo en el navegador

Ve a la carpeta mi-pagina y haz doble clic en index.html. Se abrirá en tu navegador predeterminado. En la barra de direcciones verás algo como file:///C:/Users/…/mi-pagina/index.html: la página está en tu computadora, no en internet.

Deberías ver tu saludo en letras grandes y «Mi primera página» en la pestaña.

Ventana del navegador mostrando una página sencilla con un título y bloques de texto — El navegador lee el archivo local y muestra la página.

Paso 5: Agrega un párrafo, una lista y un enlace

Debajo del <h1>, dentro de <body>, agrega:

<p>Estoy aprendiendo HTML con Paso a Paso.</p>

<h2>Tres cosas que me gustan</h2>
<ul>
  <li>Jugar fútbol</li>
  <li>Dibujar</li>
  <li>La música</li>
</ul>

<p>Mi sitio favorito es <a href="https://es.wikipedia.org">Wikipedia</a>.</p>

<p> es un párrafo.
<h2> es un subtítulo, un nivel por debajo del <h1>. Usa un solo <h1> por página.
<ul> es una lista con viñetas y cada <li> es un elemento.
<a href="…"> es un enlace; lo que va en href es la dirección completa, con https://.

Guarda y recarga el navegador (F5 o Cmd + R). Este ciclo —editar, guardar, recargar— es el ritmo de trabajo de cualquier desarrollador web.

Esquema de una página con un título grande y bloques de contenido debajo — Título, subtítulos y bloques de contenido: la jerarquía que define HTML.

Paso 6: Comprueba que el código es válido

Abre el validador oficial del W3C (validator.w3.org), elige Validate by Direct Input, pega todo tu código y pulsa Check. Si dice «No errors or warnings to show», tu página está bien escrita. Si marca un error, te indica la línea: casi siempre es una etiqueta sin cerrar.

Código completo

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, soy Ana</h1>
    <p>Estoy aprendiendo HTML con Paso a Paso.</p>

    <h2>Tres cosas que me gustan</h2>
    <ul>
      <li>Jugar fútbol</li>
      <li>Dibujar</li>
      <li>La música</li>
    </ul>

    <p>Mi sitio favorito es <a href="https://es.wikipedia.org">Wikipedia</a>.</p>
  </body>
</html>

Si algo no funciona

Lo que ves	Causa probable	Solución
El navegador muestra el código en vez de la página	El archivo se llama `index.html.txt`	Renómbralo con extensiones visibles (paso 2).
Aparecen símbolos raros en lugar de tildes	Falta `<meta charset="UTF-8">` o el archivo no se guardó en UTF-8	Agrega la etiqueta y, en el editor, guarda con codificación UTF-8.
Cambias algo y no se ve	No guardaste o no recargaste	Ctrl + S en el editor y F5 en el navegador.
Todo lo que sigue a una línea sale en negrita o como título	Una etiqueta quedó sin cerrar	Busca la que falta (`</h2>`, `</a>`…) o usa el validador.
El enlace no lleva a ningún lado	Falta `https://` en el `href`	Escribe la dirección completa.

Preguntas frecuentes

¿Necesito internet para hacer esto?

No. El archivo vive en tu computadora y el navegador lo abre sin conexión. Solo el enlace a Wikipedia y el validador necesitan internet.

¿Mi página ya está publicada?

Todavía no: solo tú la ves. Para que otros la visiten hay que subirla a un servidor o a un servicio de hosting, algo que se aprende más adelante.

¿Por qué se ve tan simple?

Porque HTML solo define la estructura: qué es título, qué es párrafo, qué es lista. Los colores, tipografías y el diseño se agregan con CSS, que es el siguiente paso.

Reto: agrega una imagen con <img src="foto.jpg" alt="Descripción de la foto">, guardando foto.jpg en la misma carpeta. El atributo alt describe la imagen para quien no puede verla.

Cómo crear tu primera página HTML desde cero