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 tienes lo esencial para montar tu primera página desde cero: la estructura básica, las etiquetas que sí o sí necesitas, cómo escribir código mucho más rápido y con qué editor. Al final te dejo los recursos para acelerar el trabajo (plantillas, favicon, página en construcción).
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.
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.
Etiquetas HTML esenciales
Con un puñado de etiquetas cubres el 90 % de 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="...">(elaltes clave para SEO y accesibilidad). - Listas:
<ul>/<ol>con<li>. - Estructura:
<header>,<nav>,<main>,<section>,<footer>(etiquetas semánticas que ayudan al SEO).
Tienes el listado ampliado en nuestro post de etiquetas HTML esenciales.
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 el doble de 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. Tienes una comparativa en los mejores editores HTML para desarrolladores.
Para aprender a fondo: si quieres una base sólida de HTML y CSS, un buen manual acelera mucho. Tienes referencias muy bien valoradas en Amazon.
Cómo publicar tu página web
Cuando tu index.html esté listo, para que sea visible en internet necesitas dos cosas: un dominio (tu dirección, como tudominio.com) y un hosting (donde se alojan los archivos). Subes tu página por FTP o desde el panel del hosting y ya está online.
Tip: para empezar sin gastar de más, busca un hosting con dominio incluido y certificado SSL gratis. Yo uso y recomiendo este hosting.
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.
¿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, que 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.
¿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, que 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 tu primera página. El siguiente paso es el CSS, para que deje de parecer un documento de texto y empiece a tener diseño. Si te ha servido la guía, compártela: me ayudas a seguir creando contenido gratis como este.
