Sustituye tus divs anónimos por etiquetas que dan sentido a tu estructura.
Abrir esta lección en KodokonUna página construida enteramente con elementos div funciona, pero no dice nada: ni a los lectores de pantalla, ni a los motores de búsqueda, ni al compañero que retomará tu código dentro de seis meses. Las etiquetas semánticas describen el papel de cada zona: header, nav, main, article, section, footer.
<body>
<header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/articles">Articles</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h1>The blog for curious devs</h1>
</main>
<footer>
<p>© 2026 Kodokon. All rights reserved.</p>
</footer>
</body>header agrupa el encabezado de la página (logotipo, navegación), footer la información de cierre (avisos legales, enlaces secundarios). main contiene el contenido principal y debe ser único en la página. nav marca una zona de navegación: la navegación principal, unas migas de pan o un índice de contenidos.
La distinción más delicada: article frente a section. Regla práctica: si el bloque tiene sentido fuera de contexto (un artículo de blog, un comentario, una ficha de producto), es un article. Si es una agrupación temática dentro de un contenido, con su propio encabezado, es un section.
<main>
<article>
<h1>Understanding semantic HTML</h1>
<section>
<h2>Accessibility</h2>
<p>Screen readers rely on the
structure to navigate.</p>
</section>
<section>
<h2>SEO</h2>
<p>Search engines understand the page better.</p>
</section>
</article>
</main>Ejercicio mental: en la página de producto de un e-commerce, ¿cómo marcarías la lista de reseñas de clientes? Cada reseña tiene un autor, una fecha y un contenido que se sostiene por sí solo: cada reseña es, por tanto, un article, y el bloque "Reseñas de clientes" que las agrupa, con su encabezado, es un section.