Cuando empezamos a maquetar, es tentador usar <div> para todo. Sin embargo, HTML5 nos ofrece etiquetas semánticas que le dan significado a nuestro código. En este tutorial, aprenderás a estructurar el layout de una página web profesionalmente, utilizando las etiquetas correctas para mejorar el SEO y la accesibilidad.
Requisitos
- Un editor de código.
- Conocimientos básicos de HTML.
Paso 1: El “Sándwich” (Header y Footer)
Todo sitio web estándar tiene una cabeza y un pie.
<header>: Aquí va lo primero que ve el usuario. Usualmente contiene el logotipo y el menú de navegación principal.
<footer>: Es el cierre de la página. Aquí van los derechos de autor, enlaces a redes sociales o información de contacto.
Paso 2: El corazón de tu página (La etiqueta <main>)
Aquí es donde muchos cometen errores o la omiten. Entre el header y el footer, debemos indicar cuál es el contenido único y principal de esa página específica. Para esto usamos la etiqueta <main>.
Nota importante: Solo debe haber un <main> visible por página. A diferencia de los divs, esta etiqueta le grita a Google: “¡Hey, lo importante está aquí dentro!”.
Paso 3: Organizando el contenido (Nav y Section)
Dentro de las áreas principales, necesitamos organizar la información:
<nav>: Úsala para envolver tus enlaces de navegación. No es necesario usarla para todos los grupos de enlaces, solo para los bloques principales (como el menú del header).
<section>: Úsala dentro del main para agrupar contenido que comparte una misma temática (ej: “Sobre nosotros”, “Galería”, “Precios”).
Resultado: El código final
Así se ve una estructura semántica limpia y profesional:
<!DOCTYPE html>
<html lang="es" class="!scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daniel Vargas ~ Platzi</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<header class="w-full h-22.5 fixed flex items-center justify-center bg-neutral-900">
<nav class="flex items-center justify-center gap-4 text-white">
<a href="#inicio" class="text-lg hover:underline">Inicio</a>
<a href="#servicios" class="text-lg hover:underline">Servicios</a>
<a href="#planes" class="text-lg hover:underline">Planes</a>
</nav>
</header>
<main>
<section class="w-full h-dvh flex flex-col items-center justify-center" id="inicio">
<h1
class="text-4xl font-bold m-10 bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-5xl text-transparent">
Bienvenidos a Platzi</h1>
<p>Esta es la sección de introducción.</p>
</section>
<section class="w-full h-dvh flex flex-col items-center justify-center border-t border-neutral-300" id="servicios">
<h2 class="text-3xl font-bold m-10">Nuestros Servicios</h2>
<p>Descripción de lo que hacemos.</p>
</section>
<section class="w-full h-dvh flex flex-col items-center justify-center border-t border-neutral-300" id="planes">
<h2 class="text-3xl font-bold m-10">Planes Disponibles</h2>
<div class="flex gap-4">
<div class="space-y-4">
<ul class="p-3 box-border rounded-lg bg-neutral-100 border border-neutral-200">
<li>
<h3 class="text-md font-bold">Plan Gratuito</h3>
</li>
<li>
<p>Acceso básico a todos los cursos introductorios.</p>
</li>
</ul>
<ul class="p-3 box-border rounded-lg bg-neutral-100 border border-neutral-200">
<li>
<h3 class="text-md font-bold">Plan Premium</h3>
</li>
<li>
<p>Acceso ilimitado y mentorías personalizadas.</p>
</li>
</ul>
</div>
<ol class="p-3 box-border rounded-lg bg-neutral-100 border border-neutral-200 space-y-3">
<li>
<h3 class="text-md font-bold">¿Cómo suscribirte?</h3>
</li>
<li>
<p>Elige tu plan preferido arriba.</p>
</li>
<li>
<p>Crea tu cuenta con tu correo electrónico.</p>
</li>
<li>
<p>Empieza a aprender de inmediato.</p>
</li>
</ol>
</div>
</section>
</main>
<footer class="w-full py-8 flex items-center justify-center border-t border-neutral-200 bg-neutral-100">
<p>© 2025 Daniel Vargas. Todos los derechos reservados.</p>
</footer>
</body>
</html>
Conclusión
Maquetar con etiquetas semánticas (header, main, footer, nav, section) hace que tu código sea más fácil de leer para ti y para los navegadores. ¡Intenta reemplazar tus divs genéricos por estas etiquetas en tu próximo proyecto!
Contacto
Si tienes dudas o quieres ver más de mi trabajo, puedes encontrarme aquí:
- Sitio web: https://danielvargas.dev
- Correo electrónico: platzi@danielvargas.dev
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
