🧩 Semántica vs. div clave

Etiquetas semánticas (como <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>) describen su propósito tanto para el navegador como para el desarrollador.

Usar solo <div> con clases (<div class="header">) no transmite significado a los crawlers ni a lectores de pantalla. La semántica mejora la accesibilidad, el SEO y la claridad del código.

🚀 SEO, Crawler y posicionamiento

SEO (Search Engine Optimization): conjunto de acciones para mejorar la visibilidad en buscadores. Las etiquetas semánticas son un pilar del SEO técnico.

Crawler (rastreador): bot que recorre la web, lee el HTML y analiza la estructura. Un crawler identifica rápidamente el contenido principal si usamos <main>, los artículos con <article>, etc.

✅ Posicionamiento: Google y otros buscadores priorizan páginas bien estructuradas. El contenido dentro de etiquetas semánticas recibe mayor peso semántico, lo que puede traducirse en mejores posiciones en los resultados.

Ejemplo: un <article> con un título <h1> y párrafos <p> es mucho más valioso que un <div> con estilos.

📌 Ejemplos por sección

• Header: <header> → logotipo, título, navegación.
• Nav: <nav> → enlaces principales de navegación.
• Main: <main> → contenido único de la página. Solo debe haber uno.
• Article: <article> → entrada de blog, noticia, comentario, etc. Autocontenido.
• Section: <section> → agrupa temáticamente (ej: "servicios", "testimonios").
• Aside: <aside> → contenido relacionado pero secundario (publicidad, enlaces, datos extra).
• Footer: <footer> → pie con información de copyright, contacto, enlaces legales.

💡 Cada etiqueta tiene un rol que los buscadores y herramientas de accesibilidad entienden. No es solo "estética", es arquitectura de información.