Cómo hacer una página web con HTML: la estructura paso a paso
En esta guía · 8 secciones
Toda página web, desde la más simple hasta la de un banco, empieza con un archivo HTML. No hace falta saber programar: HTML es como ordenar el contenido en cajas con nombre. En esta guía armarás tu primera página y verás el resultado al instante.
¿Qué es HTML?
HTML le dice al navegador qué es cada cosa: esto es un título, esto un párrafo, esto una imagen. Para eso usa etiquetas entre los signos < y >. Casi todas se abren y se cierran:
<p>Esto es un párrafo.</p>La etiqueta de cierre lleva una barra: </p>. Todo lo que queda en medio es el contenido.
El esqueleto de toda página
Todas las páginas web empiezan con esta misma base. Cópiala tal cual cada vez que empieces una nueva:
<!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.</p>
</body>
</html><!DOCTYPE html>Avisa al navegador de que es una página HTML moderna.<html lang="es">Envuelve toda la página e indica que está en español.<head>Información que no se ve en la página: el título de la pestaña, el tipo de letras, los estilos.<meta charset="utf-8">Hace que las tildes y la ñ se vean bien.<meta name="viewport" …>Adapta la página a la pantalla del celular.<title>El texto que aparece en la pestaña del navegador y en Google.<body>Todo lo que el visitante ve: textos, imágenes, botones.
Las partes de una página
Dentro de <body>, la página se divide en zonas. Usar la etiqueta correcta ayuda a Google y a las personas que usan lectores de pantalla.
<header>La cabecera: el logo, el nombre y a veces el menú.<nav>El menú con los enlaces principales.<main>El contenido principal. Solo hay uno por página.<section>Un bloque del contenido con su propio tema, como "Servicios" o "Contacto".<article>Un contenido que tiene sentido solo: una noticia, un producto, una tarjeta.<footer>El pie: derechos, redes sociales, datos de contacto.
Las etiquetas que más usarás
<h1> … <h6>Títulos, del más importante (h1) al menos importante (h6). Usa un solo h1 por página.<p>Un párrafo de texto.<a href="https://…">Un enlace. En href va la dirección a la que lleva.<img src="foto.jpg" alt="…">Una imagen. En alt describe la foto para quien no puede verla. No lleva cierre.<ul> y <li>Una lista con viñetas: ul es la lista y cada li es un punto.<strong>Resalta un texto importante, en negrita.<button>Un botón.
Pruébalo tú mismo
Este es el contenido de la página de una panadería. Cambia el texto de la izquierda y mira cómo cambia el resultado. Prueba a añadir otro producto con <li>Tu producto</li>. Si algo se rompe, pulsa Restablecer.
Se ve simple porque todavía no tiene estilos: de eso se encarga CSS, en la siguiente guía.
Crea tu primer archivo en la computadora
- Crea una carpeta llamada mi-web en tu escritorio.
- Abre el Bloc de notas. Si quieres algo más cómodo, instala gratis Visual Studio Code, que colorea el código.
- Pega el esqueleto de arriba y cambia el título y el texto.
- Ve a Archivo > Guardar como. En "Tipo" elige Todos los archivos, escribe el nombre index.html y en "Codificación" elige UTF-8.
- Haz doble clic en index.html: se abrirá en tu navegador. ¡Ya tienes una página web!
Ponte a prueba
Va en <title>, dentro de <head>. El <h1> es el título que se ve dentro de la página.
<nav> es la etiqueta para los menús de navegación. Normalmente va dentro de <header>.
src dice dónde está la imagen y alt la describe. La etiqueta <img> no se cierra.
Siguiente paso
Tu página ya tiene estructura. Ahora toca que se vea bonita: sigue con CSS desde cero.
