¿Recuerdas el <div>? Es el contenedor universal, la caja sin etiqueta.
Puedes meter cualquier cosa dentro y funcionará. Pero hay un problema:
el navegador no tiene idea de qué representa.
Imagina una mudanza donde todas las cajas dicen "COSAS". Técnicamente funciona, pero cuando busques la cafetera... buena suerte.
Las etiquetas semánticas son cajas con etiquetas claras: "COCINA", "DORMITORIO", "FRÁGIL". No cambian el contenido, pero le dicen al mundo qué hay dentro.
Podrías construir una web entera solo con <div>. Funcionaría.
Pero estarías perdiendo algo importante:
Accesibilidad — Los lectores de pantalla usan las etiquetas semánticas
para navegar. Un usuario ciego puede saltar directamente al <main>
o listar todos los <nav>. Con divs, está perdido.
SEO — Google entiende mejor tu contenido cuando usas semántica.
Sabe que el <article> es el contenido principal, no la publicidad del <aside>.
Mantenibilidad — Cuando vuelvas a tu código en 6 meses,
<header> te dice más que <div class="parte-de-arriba">.
<header> — La cabeceraEl encabezado de la página o de una sección. Normalmente contiene el logo, el título principal, y la navegación:
<nav> — La navegaciónAgrupa enlaces de navegación principal. No todos los enlaces van en un <nav> —
solo los que forman un menú de navegación:
<main> — El contenido principalEl corazón de tu página. Solo debe haber uno por página. Todo lo que no sea header, footer o navegación lateral:
<footer> — El pie de páginaLa información del final: copyright, enlaces legales, redes sociales:
<section> — Una sección temáticaAgrupa contenido relacionado bajo un mismo tema. Normalmente tiene su propio título:
<article> — Contenido independienteUn bloque que tendría sentido por sí solo, fuera de la página: un post de blog, una noticia, un comentario, un producto:
La diferencia con <section>: un article podría publicarse solo
(como un RSS o compartirse en redes). Una section es parte de algo mayor.
<aside> — Contenido secundarioInformación relacionada pero no esencial: barras laterales, publicidad, enlaces relacionados, biografía del autor:
Así se ve una página web bien estructurada:
Visualmente, esto podría verse igual que una página hecha solo con divs. Pero para navegadores, buscadores y usuarios con discapacidades, es un mundo de diferencia.
Reestructura una página usando etiquetas semánticas:
<header> con título y navegación<main> con un <article> y un <section><footer> con información de copyrightEl código que escribes habla. Asegúrate de que diga algo con sentido...