Cómo hacer una página web en HTML paso a paso: de cero a publicarla

Crear una página web en HTML es el primer paso de cualquier proyecto web, y es más sencillo de lo que parece. En esta guía montas una web real de dos páginas, de la carpeta vacía a publicarla en internet: estructura, etiquetas, CSS, enlaces entre páginas y cómo subirla gratis o a un hosting. Todo el código lo he probado en el navegador, en ordenador y en móvil.

Respuesta rápida: crea una carpeta con un archivo index.html. Escribe la estructura básica de HTML, añade tu contenido con etiquetas y dale estilo con un archivo CSS. Ábrelo con doble clic para verlo en el navegador. Cuando esté listo, súbelo a Netlify o GitHub Pages (gratis) o a un hosting con tu dominio.

Cómo crear una página web en HTML en 7 pasos

1. Prepara la carpeta del proyecto con index.html y las subcarpetas css e img.
2. Escribe la estructura básica de HTML y ábrela en el navegador.
3. Añade el contenido con las etiquetas esenciales: títulos, párrafos, imágenes y enlaces.
4. Dale estilo con CSS en un archivo aparte.
5. Crea más páginas y enlázalas con un menú.
6. Comprueba que funciona en móvil y que el código es válido.
7. Publícala en internet.

Qué es HTML y para qué sirve

HTML (HyperText Markup Language) es el lenguaje que estructura el contenido de una página web: títulos, párrafos, imágenes, enlaces y botones. No es un lenguaje de programación, sino de marcado: describes qué es cada cosa con etiquetas, y el navegador lo interpreta y lo muestra. HTML pone los cimientos; el CSS lo viste y el JavaScript le da interactividad.

Paso 1: prepara la carpeta del proyecto

Antes de escribir código, crea una carpeta para tu web (por ejemplo, mi-web) con esta estructura:

mi-web/
├── index.html      ← la página de inicio
├── contacto.html   ← otra página
├── css/
│   └── estilos.css ← el diseño
└── img/
    └── retrato.jpg ← las imágenes

La página principal tiene que llamarse index.html, en minúsculas: es la que abren los servidores por defecto. Usa también minúsculas y guiones en el resto de nombres, sin espacios ni tildes. Te ahorrarás enlaces rotos al publicar.

Si usas Windows: activa «Extensiones de nombre de archivo» en el menú Vista del Explorador de archivos. Si no, puedes acabar con un index.html.txt sin darte cuenta, y el navegador lo mostrará como texto.

Paso 2: la estructura básica de una página HTML

Toda página parte del mismo esqueleto. Copia esto en un archivo llamado index.html y ábrelo con el navegador:

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

• <!DOCTYPE html>: indica al navegador que es HTML5.
• <head>: metadatos que no se ven (codificación, viewport para móvil, título de la pestaña).
• <body>: todo lo que sí se ve en la página.

Fíjate en la etiqueta <meta name="viewport">: es la que hace que tu página se vea bien en móvil, imprescindible hoy. Y <meta charset="UTF-8"> evita que las tildes y la ñ salgan como símbolos raros.

Para verla, haz doble clic en index.html y se abrirá en tu navegador. Cada vez que guardes un cambio en el editor, pulsa F5 en el navegador para recargar.

Paso 3: añade contenido con las etiquetas esenciales

Con un puñado de etiquetas cubres casi todo lo que lleva una página:

• Encabezados: <h1> a <h6> (un solo <h1> por página).
• Texto: <p> (párrafo), <strong> (negrita), <em> (cursiva).
• Enlaces: <a href="...">.
• Imágenes: <img src="..." alt="..."> (el alt es clave para SEO y accesibilidad).
• Listas: <ul>/<ol> con <li>.
• Estructura: <header>, <nav>, <main>, <section>, <footer> (etiquetas semánticas que ayudan al SEO).

Así queda el index.html de una web real, la de una ilustradora. Ya incluye el enlace al CSS del paso 4 y el menú del paso 5:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lucía Martín · Ilustradora</title>
    <link rel="stylesheet" href="css/estilos.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="index.html">Inicio</a>
        <a href="contacto.html">Contacto</a>
      </nav>
    </header>

    <main>
      <h1>Hola, soy Lucía</h1>
      <p>Ilustro libros infantiles y carteles para eventos.</p>
      <img src="img/retrato.jpg" alt="Lucía dibujando en su estudio" width="600" height="400">

      <section>
        <h2>Qué hago</h2>
        <ul>
          <li>Ilustración para libros</li>
          <li>Carteles y portadas</li>
        </ul>
        <a class="boton" href="contacto.html">Pídeme presupuesto</a>
      </section>
    </main>

    <footer>
      <p>© 2026 Lucía Martín</p>
    </footer>
  </body>
</html>

Las rutas son relativas: img/retrato.jpg significa «dentro de la carpeta img, junto a este archivo». Así la web funciona igual en tu ordenador que en el servidor. Tienes el detalle de cada etiqueta en las 20 etiquetas HTML esenciales.

Paso 4: dale estilo con CSS

El HTML sin CSS parece un documento de texto. El diseño va en un archivo aparte, css/estilos.css, que enlazas desde el <head> de cada página:

<link rel="stylesheet" href="css/estilos.css">

Fíjate en rel="stylesheet": si falta o está mal escrito, el navegador ignora el CSS. Este es un estilos.css de partida, ya adaptado a móvil:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #222;
  margin: 0;
}

header, main, footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem;
}

nav a {
  margin-right: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

.boton {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #1d4ed8;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

@media (max-width: 600px) {
  h1 {
    font-size: 1.6rem;
  }
}

Tres reglas hacen el trabajo responsive: max-width: 720px limita el ancho del texto en pantallas grandes, max-width: 100% impide que las imágenes se salgan en el móvil, y la @media reduce el título en pantallas pequeñas. Si quieres ir más allá, tienes la hoja de ruta de CSS.

Paso 5: crea más páginas y enlázalas

Para una segunda página, duplica index.html, renómbralo a contacto.html y cambia el contenido del <main>. Mantén igual el <head> (con su propio <title>) y el menú, para que las dos páginas compartan diseño y navegación:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contacto · Lucía Martín</title>
    <link rel="stylesheet" href="css/estilos.css">
  </head>
  <body>
    <header>
      <nav>
        <a href="index.html">Inicio</a>
        <a href="contacto.html">Contacto</a>
      </nav>
    </header>

    <main>
      <h1>Contacto</h1>
      <p>Escríbeme a <a href="mailto:hola@ejemplo.com">hola@ejemplo.com</a> y te respondo en 24 horas.</p>
    </main>
  </body>
</html>

El menú es el mismo bloque <nav> en las dos páginas, con enlaces a index.html y contacto.html. El enlace mailto: abre el programa de correo del visitante con tu dirección ya puesta.

Cómo escribir HTML más rápido (Emmet)

La forma más rápida de escribir HTML es con Emmet, incluido de serie en editores como VS Code. Escribes una abreviatura y pulsas Tab para expandirla. Por ejemplo, teclea ! y Tab y te genera toda la estructura básica de arriba. Otros atajos:

• ul>li*5 + Tab → una lista con 5 elementos.
• div.contenedor + Tab → <div class="contenedor"></div>.
• a[href=#] + Tab → un enlace listo para rellenar.

Con cuatro abreviaturas de Emmet interiorizadas escribes mucho más rápido. Es el mejor atajo que puedes aprender al empezar.

Con qué editor escribir HTML

Solo necesitas un editor de texto, pero uno de código te ahorra errores con el coloreado de sintaxis y el autocompletado. El estándar gratuito es Visual Studio Code. Con su extensión Live Server, la página se recarga sola cada vez que guardas. Tienes una comparativa en los mejores editores HTML para desarrolladores.

Paso 6: comprueba que todo funciona

• En móvil: en Chrome, abre las herramientas de desarrollo (F12) y pulsa Ctrl+Mayús+M para ver la página con tamaño de móvil.
• Código válido: sube tu archivo al validador del W3C. Te dice qué etiqueta falta por cerrar o qué atributo sobra.
• Enlaces e imágenes: haz clic en todos los enlaces y comprueba que se ven todas las imágenes.
• Textos alternativos: cada <img> con su alt descriptivo.

Paso 7: publica tu página web

Cuando tu web funcione en local, para que sea visible en internet tienes tres caminos:

Opción	Coste	Para qué	Cómo
Netlify Drop	Gratis	Probar o enseñar tu web	Arrastras la carpeta a app.netlify.com/drop y te da una dirección .netlify.app
GitHub Pages	Gratis	Portfolio y proyectos personales	Subes los archivos a un repositorio de GitHub y activas Pages
Hosting + dominio	De pago	La web de tu negocio	Subes los archivos por FTP o desde el panel del hosting

Netlify Drop ni siquiera pide cuenta para empezar. Eso sí, la web queda protegida con una contraseña temporal hasta que la reclamas creando una cuenta gratuita.

GitHub Pages es perfecto para un portfolio, pero sus condiciones no permiten usarlo como hosting gratuito para un negocio online. Lo dice en su documentación de límites.

Para la web de un negocio necesitas un dominio (tu dirección, como tudominio.com) y un hosting (donde se alojan los archivos). Subes tu carpeta por FTP o desde el administrador de archivos del panel, y ya está online. Si vas a registrar el dominio, antes mira cómo registrar un dominio.

¿Necesitas la web de tu negocio y prefieres no programarla tú? También puedo hacértela: echa un vistazo a mis servicios de diseño web.

Errores típicos al crear tu primera web en HTML

• El CSS no se aplica: revisa el rel="stylesheet" y la ruta del href. Si todo está bien, recarga sin caché con Ctrl+F5.
• Las tildes salen como «Ã©»: falta <meta charset="UTF-8"> o el archivo no está guardado en UTF-8.
• La imagen no se ve al publicar, pero sí en tu ordenador: casi siempre son mayúsculas. Los servidores distinguen Foto.jpg de foto.jpg; Windows no.
• El navegador enseña el código en vez de la página: el archivo es index.html.txt. Activa las extensiones en Windows (paso 1).
• Comillas raras que rompen el código: pasa al copiar desde Word o algunas webs. El código necesita comillas rectas (» «), no tipográficas (“ ”).

Recursos para tu web

No tienes que hacerlo todo desde cero. Estos recursos te ahorran horas:

• Plantillas listas: parte de una base profesional con nuestras mejores plantillas HTML gratis.
• Página en construcción: mientras terminas, pon una página web en construcción.
• Favicon: dale identidad a la pestaña con un favicon.
• El siguiente paso: aprende CSS para darle estilo a tu HTML.

Preguntas frecuentes

¿Puedo crear una página web solo con HTML?

Sí, HTML basta para una página con contenido. Pero para que se vea bien necesitas CSS (estilos) y, si quieres interactividad, JavaScript. Lo normal es empezar por HTML y añadir CSS enseguida.

¿Cómo abro un archivo HTML?

Haz doble clic sobre él y se abrirá en tu navegador predeterminado. Para editarlo, clic derecho y «Abrir con» tu editor de código. Si se abre como texto, revisa que la extensión sea .html y no .txt.

¿Necesito programas de pago para hacer HTML?

No. Con el Bloc de notas ya podrías, aunque lo ideal es un editor gratuito como Visual Studio Code. Trae coloreado de sintaxis, autocompletado y Emmet incluido.

¿Cuánto se tarda en aprender HTML?

Lo básico para montar una página sencilla, en un par de tardes. Dominar la estructura semántica, la accesibilidad y combinarlo con CSS lleva unas semanas de práctica. Es de lo más rápido de aprender en desarrollo web.

¿Puedo publicar mi web en HTML gratis?

Sí. Netlify y GitHub Pages te dan una dirección gratuita. Para la web de un negocio, con tu propio dominio y sin las limitaciones de esos planes, lo normal es un hosting de pago.

¿HTML o WordPress para la web de mi negocio?

Si la web cambia poco, HTML es rápido y barato de mantener. Si vas a publicar a menudo o necesitas tienda, reservas o blog, WordPress te ahorra trabajo. Tienes el camino de WordPress en crear tu web con WordPress.

¿HTML5 es distinto de HTML?

HTML5 es la versión actual de HTML. Cuando hoy se habla de «HTML» se da por hecho que es HTML5. Añadió etiquetas semánticas (header, nav, main), vídeo y audio nativos y más. Todo lo de esta guía es HTML5.

Con esto ya puedes montar y publicar tu primera web. El siguiente paso es profundizar en CSS, para que deje de parecer un documento y tenga el diseño que quieres. Si te ha servido la guía, compártela: me ayudas a seguir creando contenido gratis como este.

Este artículo incluye algunos enlaces de afiliado: si compras a través de ellos, recibo una pequeña comisión sin coste adicional para ti.