HTML SEMÁNTICO: QUÉ ES, POR QUÉ IMPORTA Y CÓMO USARLO CORRECTAMENTE
El HTML semántico es una forma de escribir código HTML que utiliza etiquetas con significado claro sobre el contenido que contienen. En lugar de recurrir exclusivamente a contenedores genéricos como "<div>" o "<span>", se emplean elementos que describen la estructura y el propósito del contenido.
¿Qué es el HTML semántico?
El término “semántico” se refiere al significado. En HTML, una etiqueta semántica no solo define cómo se ve algo, eso lo hace el CSS, sino qué es. Por ejemplo:
"<header>" indica que se trata de la cabecera de una página o sección.
"<nav>" señala que el contenido es un menú de navegación.
"<article>" representa un contenido independiente y autocontenido como una noticia o una entrada de blog.
"<aside>" se usa para contenido complementario o relacionado como barras laterales, publicidad, etc..
"<footer>" marca el pie de página o de una sección.
"<main>" identifica el contenido principal de la página.
"<figure>" y "<figcaption>" agrupan imágenes o ilustraciones con su descripción.
"<time>" indica una fecha u hora.
Etiquetas de texto como "<h1>"–"<h6>", "<p>", "<strong>", "<em>", "<blockquote>", "<cite>", etc., también aportan semántica.
¿Por qué es importante el HTML semántico?
Accesibilidad
Los lectores de pantalla y otras tecnologías de asistencia interpretan mejor la estructura de la página. Un usuario ciego puede saltar directamente al contenido principal como "<main>" o a la navegación "<nav>" gracias a estas etiquetas.
SEO, posicionamiento en buscadores.
Los motores de búsqueda entienden mejor el contenido y su jerarquía. Esto facilita que indexen correctamente títulos, artículos, fechas y la estructura general del sitio.
Mantenibilidad y legibilidad del código
Un desarrollador que vea el código entiende inmediatamente la estructura sin necesidad de adivinar qué hace cada "<div class="header">"
Mejor rendimiento y futuro
Facilita el trabajo de herramientas automáticas, frameworks y posibles nuevas tecnologías que se basen en la semántica del documento.
Separación de responsabilidades
El HTML se centra en el significado, el CSS en la presentación y el JavaScript en el comportamiento.
Buenas prácticas
Usar solo un "<h1>" por página, generalmente el título principal.
Respetar la jerarquía de encabezados, h1 → h2 → h3….
No abusar de "<section>" o "<article>", usarlos solo cuando aporten significado real.
El elemento "<main>" debe aparecer una sola vez por documento.
Combinar semántica con parámetros ARIA solo cuando sea necesario, el HTML semántico ya aporta mucha información de accesibilidad.
Validar el código con el validador del W3C.
Pensar primero en el significado del contenido y después en cómo se verá.
Un atributo ARIA es un atributo especial que se añade a las etiquetas HTML para mejorar la accesibilidad de una página web, especialmente cuando el HTML semántico por sí solo no es suficiente.
