6. HTML Semántico: El Nivel Pro
Basta de la "Div-itis"
Mucha gente usa la etiqueta <div> para todo. Un div no significa NADA para Google. Es solo una caja invisible.
El HTML Semántico usa etiquetas con significado real: <nav> significa navegación, <footer> significa pie de página.
🏗️ La Ciudadela Semántica
Aprende a usar estas etiquetas en lugar de simples cajas:
- <header>: La cabecera de la web o de una sección separada.
- <nav>: Exclusivo para los menús de navegación.
- <main>: El contenido central y UNICO de la página (solo un main por página).
- <section>: Un grupo de contenido relacionado (el "Capítulo").
- <article>: Contenido que se puede leer solo y tiene sentido entero (un post de blog, una noticia).
- <aside>: Información lateral (anuncios, recomendados, barras laterales).
- <footer>: Información de copyright, enlaces legales, redes sociales abajo.
Beneficios: SEO y Accesibilidad
Si usas semántica:
- Google te ama: Posicionas mejor porque el buscador sabe exactamente qué es cada parte de tu web.
- Accesibilidad: Las personas invidentes usan lectores que les dicen: "Estás en la navegación" o "Estás en el pie de página". ¡Crea para todos!
🏆 Examen Final HTML5
Has aprendido a construir el esqueleto de internet. ¿Estás listo para dar el salto al diseño con CSS?
