Cómo usar etiquetas HTML para maquetar una página web desde cero
✅ Requisito: Solo necesitas un editor de texto (como VS Code) y muchas ganas de aprender
📌 Introducción
Cuando empecé a crear mi primera página web, me sentía abrumado por la cantidad de etiquetas HTML disponibles. ¿Por dónde empezar? ¿Qué se necesita realmente para darle estructura a una web?
En este tutorial, te muestro cómo utilicé HTML para maquetar mi primera página, entendiendo cada parte como si estuviera armando un rompecabezas. No necesitas ser experto, solo seguir los pasos y probar por ti mismo.
🧱 Paso 1: Crear la estructura base del HTML
Lo primero que hice fue crear un archivo llamado index.html y escribir la estructura mínima para que el navegador entendiera que era una página web.
html
Copiar código
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<title>Mi Página</title>
</head>
<body>
</body>
</html>
🧠 Dato útil: Esta base se usa en todas las páginas HTML. Es como el esqueleto de tu web.
🧱 Paso 2: Usar etiquetas semánticas para organizar el contenido
Aquí fue donde entendí que no se trata solo de poner cosas una debajo de la otra. Usé etiquetas semánticas que le dicen al navegador (y a otros desarrolladores) qué es cada parte del contenido:
html
Copiar código
<body>
<header>
<h1>Mi sitio web</h1>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Bienvenido</h2>
<p>Gracias por visitar mi página web.</p>
</section>
<section>
<h2>Sobre mí</h2>
<p>Me apasiona el desarrollo web y quiero compartir lo que sé.</p>
</section>
</main>
<footer>
<p>© 2025 Mi sitio web</p>
</footer>
</body>
🧩 Truco de estructura: Pensé en la web como si fuera una revista: tiene portada, índice, contenido y pie de página.
🧱 Paso 3: Validar el código y probar en el navegador
Abrí el archivo index.html en Chrome (puedes arrastrarlo o hacer doble clic) y verifiqué que todo se mostrara.
Usé la herramienta HTML Validator para asegurarme de que no había errores.
📚 ¿Qué aprendí al hacer esto?
Que HTML no es solo poner texto, sino dar estructura y significado.
Que las etiquetas semánticas como <header>, <main>, <section> y <footer> no son opcionales, sino buenas prácticas.
Que cuanto más claro esté tu HTML, más fácil será aplicar estilos después con CSS.
🚀 ¿Y ahora qué?
Te invito a que pongas en práctica estos pasos creando una página tuya. Puedes cambiar los textos, enlaces y agregar imágenes. Lo importante es que entiendas cómo se arma una página desde el inicio.
Si quieres, también puedo ayudarte a hacer el siguiente paso: aplicar estilos con CSS o hacer que sea responsive.
