Crear tu primera página web con HTML es más sencillo de lo que imaginas: solo necesitas un archivo de texto y las etiquetas correctas.
¿Recuerdas la lección anterior? Aprendiste que HTML define la estructura de un sitio web. Hoy vas a ver eso en acción. Vamos a construir una página real, desde cero, línea por línea.
El esqueleto que todo sitio web necesita
Todo documento HTML tiene una estructura base. Siempre. Sin excepción.
Piensa en ella como el esqueleto de un cuerpo humano. Sin huesos, no hay forma. Sin esta estructura, el navegador no sabe qué mostrar.
Así se ve la estructura mínima de cualquier página web:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<h1>Hola, mundo</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>
No te asustes si parece mucho. Vamos parte por parte.
¿Qué hace cada línea?
<!DOCTYPE html> le dice al navegador que este archivo usa HTML moderno. Siempre va en la primera línea. Siempre.
<html lang="es"> es la etiqueta que envuelve todo el contenido de la página. El atributo lang="es" le indica al navegador que el idioma es español. Importante para accesibilidad y SEO.
<head> contiene información que el usuario no ve directamente. Aquí van el título de la pestaña, el charset y, más adelante, los estilos CSS.
<meta charset="UTF-8"> permite que tu página muestre correctamente letras como á, é, ñ y ü. Sin esto, esos caracteres se ven como símbolos extraños.
<title> define el texto que aparece en la pestaña del navegador. Es lo primero que Google indexa.
<body> es donde vive todo el contenido visible: textos, imágenes, botones, formularios.
La historia de Rodrigo: de cero a su primera página
Rodrigo tiene 24 años y vende playeras personalizadas en Tepito. Sus clientes le pedían una página web para ver el catálogo. Pero no tenía dinero para pagar un diseñador web, que cobra desde $5,000 por un sitio básico.
Entró a un editor gratuito llamado VS Code, creó un archivo llamado index.html y pegó la estructura base. Después agregó el nombre de su negocio en el <h1> y una descripción corta en un <p>.
En menos de 20 minutos tenía algo real en su pantalla. "No puedo creer que fue tan fácil", le dijo a su amigo. Esa página le sirvió para mostrar su trabajo mientras construía algo más completo.
Las etiquetas esenciales que usarás siempre
No necesitas memorizar cientos de etiquetas para empezar. Estas seis te llevan muy lejos:
Encabezados: <h1> hasta <h6>
Sirven para títulos y subtítulos. El <h1> es el más importante y solo debe usarse una vez por página. El <h2> es para secciones principales, el <h3> para subsecciones.
<h1>Playeras personalizadas en CDMX</h1>
<h2>Nuestros modelos</h2>
<h3>Playeras básicas</h3>
Párrafos: <p>
Todo bloque de texto normal va dentro de un <p>. El navegador agrega espacio automático arriba y abajo.
<p>Enviamos a todo México en 3 días hábiles.</p>
Listas: <ul> y <ol>
Usa <ul> para listas sin orden (puntos) y <ol> para listas numeradas. Cada elemento va dentro de <li>.
<ul>
<li>Playeras de algodón</li>
<li>Hoodies bordados</li>
<li>Gorras personalizadas</li>
</ul>
Enlaces: <a>
Permiten navegar a otra página o sección. El atributo href define el destino.
<a href="https://wa.me/5215512345678">Contáctame por WhatsApp</a>
Imágenes: <img>
Muestran una imagen. Necesitan dos atributos: src (la ruta de la imagen) y alt (descripción para personas con discapacidad visual).
<img src="playera-roja.jpg" alt="Playera roja con estampado de águila">
Divisiones: <div>
Son cajas invisibles que agrupan contenido. Más adelante, con CSS, les darás color, tamaño y posición.
<div>
<h2>Oferta del mes</h2>
<p>3 playeras por $450.</p>
</div>
La historia de Valentina: una página de presentación personal
Valentina es diseñadora gráfica freelance en Monterrey. Cobra entre $8,000 y $15,000 por proyecto. Quería una página web para mostrar su portafolio, pero no sabía nada de código.
Siguió exactamente los pasos de esta lección. Creó su index.html, agregó un <h1> con su nombre, un <p> con su especialidad y una <ul> con sus servicios. Luego agregó una imagen de su logo con <img>.
Tardó menos de una hora. Lo abrió en su navegador y vio su nombre en pantalla. Ese fue el momento en que dejó de ver el código como algo intimidante.
Cómo crear y abrir tu archivo HTML
Sigue estos pasos exactos:
- Abre VS Code (descárgalo gratis en code.visualstudio.com).
- Crea un archivo nuevo y guárdalo como
index.html. - Escribe o pega la estructura base que vimos arriba.
- Guarda el archivo con Ctrl+S (o Cmd+S en Mac).
- Abre tu explorador de archivos, localiza el archivo y haz doble clic.
- Se abrirá directamente en tu navegador. ¡Ya tienes una página web!
No necesitas internet para esto. Tu página vive en tu computadora por ahora. En lecciones posteriores aprenderás a publicarla en línea.
Errores comunes al escribir HTML
Todos los cometen al principio. Conocerlos ahora te ahorra horas de frustración.
Olvidar cerrar una etiqueta. Si abres <p> debes cerrarlo con </p>. Si no lo haces, el contenido siguiente queda "atrapado" dentro y el diseño se rompe.
Escribir mal el nombre de la etiqueta. HTML no conoce <tittle> ni <body>. Un solo carácter equivocado y la etiqueta no funciona. Lee dos veces antes de guardar.
No usar el charset UTF-8. Si escribes en español y olvidas <meta charset="UTF-8">, tus acentos y la ñ aparecerán como símbolos raros. Esta línea es obligatoria en México.
Poner contenido fuera del <body>. Todo lo que el usuario debe ver tiene que estar dentro de <body>. Si lo pones fuera, el navegador puede ignorarlo.
Usar espacios en los nombres de archivos. Guarda tus imágenes y archivos sin espacios. En lugar de foto portada.jpg usa foto-portada.jpg. Los espacios rompen las rutas en HTML.
Tu primera página completa: un ejemplo real
Así quedaría una página sencilla para un negocio de comida en Guadalajara:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tacos El Güero - Guadalajara</title>
</head>
<body>
<h1>Tacos El Güero</h1>
<p>Los mejores tacos de canasta en Guadalajara desde 1998.</p>
<h2>Nuestro menú</h2>
<ul>
<li>Tacos de papa - $12 c/u</li>
<li>Tacos de frijol - $10 c/u</li>
<li>Tacos de chicharrón - $15 c/u</li>
</ul>
<h2>¿Dónde encontrarnos?</h2>
<p>Mercado Corona, puesto 42. Lunes a sábado de 7am a 2pm.</p>
<a href="https://wa.me/5213312345678">Haz tu pedido por WhatsApp</a>
</body>
</html>
Esta página tiene todo lo esencial: un título claro, información útil, una lista y un enlace de contacto. Es simple. Y funciona.
¿Ves cómo cada etiqueta tiene un propósito concreto? No es magia. Es lógica.
Lo que lograste hoy
Escribiste HTML real. Entendiste para qué sirve cada parte de la estructura base. Conociste las etiquetas que aparecen en prácticamente todos los sitios web del mundo, desde los de Mercado Libre hasta los de una pequeña tienda en Oaxaca.
En la siguiente lección verás cómo dar formato al texto: negritas, cursivas, tamaños y colores. Tu página empezará a tener personalidad.