Etiquetas semánticas
Este es el módulo que separa el HTML "que funciona" del HTML "bien escrito". Vamos a dar significado real a la estructura de la página, en vez de apoyarnos solo en <div> para todo.
¿Qué significa "semántico"?
Una etiqueta es semántica cuando su propio nombre describe qué es el
contenido que envuelve, no solo cómo se ve. <div> no
dice nada sobre su contenido — es un contenedor neutro. En cambio,
<nav> te dice, sin ambigüedad, "aquí hay navegación".
Esto importa por tres motivos muy concretos: accesibilidad (los lectores de pantalla usan estas etiquetas para que una persona ciega pueda saltar directamente al menú o al contenido principal), SEO (Google entiende mejor de qué trata tu página), y mantenimiento (tú, dentro de seis meses, entenderás tu propio código mucho más rápido).
Regla práctica: antes de escribir <div>, pregúntate si existe una etiqueta semántica que describa mejor ese bloque. Si la respuesta es sí, úsala. <div> sigue siendo válido y necesario — pero como último recurso, no como opción por defecto.
El esqueleto semántico de una página típica
La cabecera de la página o de una sección: normalmente logo, título y navegación principal.
Agrupa los enlaces de navegación principal. No todo grupo de enlaces necesita <nav> — resérvalo para bloques de navegación de verdad importantes.
El contenido principal y único de la página. Debe aparecer una sola vez, y no debe repetir contenido que ya está en el header, nav o footer.
El pie de página: copyright, enlaces legales, redes sociales, datos de contacto.
<section> vs <article>
Estas dos generan más dudas que el resto, así que vamos despacio.
Un bloque temático dentro de la página, que normalmente tiene su propio título (h2, h3...). Piensa en los capítulos de un libro: agrupan contenido relacionado, pero no tienen sentido fuera de ese libro.
Contenido que tendría sentido por sí solo, incluso si lo sacaras de la página y lo pegaras en otro sitio: una entrada de blog, una noticia, una tarjeta de producto, un comentario.
Fíjate en el ejemplo: <section> agrupa el bloque
"últimos proyectos" en su conjunto, mientras que cada
<article> es un proyecto concreto que podría
perfectamente compartirse o mostrarse de forma aislada en otra página.
<aside>: contenido relacionado, pero secundario
Contenido relacionado con lo principal pero no imprescindible para entenderlo: una barra lateral, una nota relacionada, publicidad, enlaces "quizá también te interese".
¿Cuándo sigue siendo correcto usar <div> y <span>?
Siempre. No son "malas" etiquetas — son las etiquetas genéricas, sin significado propio, y siguen siendo necesarias cuando de verdad necesitas un contenedor solo para aplicar estilos o agrupar visualmente algo que no encaja en ninguna categoría semántica (por ejemplo, un wrapper interno para controlar un grid con CSS).
Contenedor genérico de bloque, sin significado semántico.
Igual que <div>, pero en línea con el texto (no rompe el flujo del párrafo). Útil para aplicar un estilo a una sola palabra dentro de una frase.
Caer en el extremo contrario y forzar etiquetas semánticas donde no encajan de verdad — por ejemplo, usar <article> para un simple bloque decorativo. La semántica ayuda cuando describe la realidad del contenido; si la fuerzas, confunde más de lo que aclara.
Ponlo a prueba
Comprueba lo que has aprendido
1. ¿Cuál es la diferencia clave entre <section> y <article>?
2. ¿Para qué se usa <aside>?
3. ¿Por qué evitar usar <div> para todo?