10 · Estructura
Antes de HTML5, todo se armaba a puro <div>. Hoy existen etiquetas que describen qué es cada bloque, no solo cómo se ve — eso ayuda a lectores de pantalla, a buscadores y a cualquier dev que lea el código después.
Landmarks de nivel de página. Debería existir un único <main> por página: es el contenido principal, el que un lector de pantalla puede saltar a escuchar directamente.
<header>Logo y navegación</header>
<main>Contenido principal de la página</main>
<footer>Links legales, contacto</footer><div> con clase 'header' no le comunica nada al navegador ni a tecnologías de asistencia. La etiqueta <header> sí.Envuelve un bloque de enlaces de navegación principal — no todos los grupos de links necesitan nav, solo los que son navegación real del sitio (menú principal, breadcrumbs, paginación).
<nav>
<a href="/">Inicio</a>
<a href="/blog">Blog</a>
<a href="/contacto">Contacto</a>
</nav>section agrupa contenido temáticamente relacionado y, en general, debería tener su propio heading (h2, h3...). Si un bloque es puramente de estilo/layout y no representa un tema propio, un div sigue siendo correcto.
<section>
Nuestros planes
Contenido temático relacionado
<section>
<h2>Nuestros planes</h2>
<p>...</p>
</section>
<!-- vs. un contenedor solo de estilo -->
<div class="grid grid-cols-3 gap-4">...</div><section>. Si es puro layout (una grilla, un wrapper de padding), es <div>.Contenido que tendría sentido por sí solo si lo sacaras de la página y lo pegaras en otro sitio: un post de blog, una tarjeta de producto, un comentario, una noticia.
12 ago 2026
Un artículo autocontenido...
<article>
<h2>Título del post</h2>
<p>Fecha, autor...</p>
<p>Contenido del post...</p>
</article><article>.Contenido relacionado pero secundario respecto al flujo principal: una barra lateral, notas al margen, links relacionados, publicidad contextual.
<main>
<article>...</article>
<aside>
<h3>Posts relacionados</h3>
<ul>...</ul>
</aside>
</main>Así se ve una página típica combinando todos los landmarks. Fíjate que main solo aparece una vez y contiene section/article según corresponda.
<body>
<header>
<nav>...</nav>
</header>
<main>
<section>
<h2>Intro</h2>
</section>
<article>...</article>
</main>
<footer>...</footer>
</body>