¡Hola querido lector! Ya estoy de nuevo por aquí para explicarte el HTML semántico: qué es y cuándo utilizar cada etiqueta.
Es de esas cosas que no se ven, pero que determinan cómo entienden tu página web los buscadores y los lectores de pantalla. Y con los asistentes de IA leyendo contenido, importa más que nunca.
En este post verás qué hace cada etiqueta, cuándo usarla y qué errores evitar, con ejemplos. ¡Vamos con ello!
Resumen rápido
- El HTML semántico usa etiquetas que describen su contenido en lugar de
divgenéricos. - Su mayor beneficio es la accesibilidad: los lectores de pantalla navegan por estas etiquetas.
- Un solo
mainpor página, y las secciones con encabezado propio. - No es un factor de posicionamiento directo, pero facilita que te entiendan.
¿Qué es el HTML semántico?
Es utilizar etiquetas que describen el papel de cada parte del contenido, en lugar de resolverlo todo con div y clases CSS.
La diferencia, en código:
<!-- Sin semántica --> <div class="cabecera">…</div> <div class="menu">…</div> <div class="contenido">…</div> <div class="pie">…</div> <!-- Con semántica --> <header>…</header> <nav>…</nav> <main>…</main> <footer>…</footer>Visualmente pueden ser idénticos. La diferencia está en que el segundo se entiende sin verlo.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
¿Por qué importa?
Accesibilidad
Es la razón principal. Los lectores de pantalla permiten saltar directamente al contenido principal o recorrer las secciones, y eso solo funciona si las etiquetas están bien puestas. Te lo explico en accesibilidad web en WordPress.
Comprensión por parte de los buscadores
Ayuda a distinguir el contenido principal del repetido (menús, pies, barras laterales). Eso sí, seamos precisos: no es un factor de posicionamiento directo y Google entiende bien páginas hechas con div. Lo que hace es ponérselo más fácil.
Mantenimiento
Un código semántico se lee solo. Cualquiera que abra tu plantilla dentro de dos años entenderá su estructura sin descifrar nombres de clases.
Buscadores con IA
Los sistemas que extraen contenido para responder preguntas se apoyan en la estructura del documento. Un contenido bien marcado es más fácil de interpretar y de citar. Lo cuento en qué es el GEO.
Las etiquetas principales
| Etiqueta | Para qué | Cuántas por página |
|---|---|---|
header | Cabecera de la página o de una sección | Varias |
nav | Bloques de navegación principales | Varias |
main | Contenido principal, sin elementos repetidos | Solo una |
article | Contenido con sentido propio fuera de su contexto | Varias |
section | Agrupación temática con su encabezado | Varias |
aside | Contenido complementario o tangencial | Varias |
footer | Pie de la página o de una sección | Varias |
figure y figcaption | Imágenes o gráficos con su leyenda | Varias |
main
Contiene el contenido único de esa página. No debe incluir cabecera, menú, pie ni barra lateral, porque esos elementos se repiten en toda la web.
Solo puede haber uno visible por página. Es la etiqueta que permite a un lector de pantalla saltar directamente al grano.
article
Úsala cuando el contenido tendría sentido por sí solo. Un post del blog, una ficha de producto, un comentario o una noticia.
La prueba: si lo sacaras de la página y lo pusieras en otro sitio, ¿seguiría entendiéndose? Si la respuesta es sí, es un article.
section
Agrupa contenido relacionado dentro de un documento. Debe llevar su propio encabezado; si no tienes nada que titular, probablemente lo que necesitas es un div.
aside
Para contenido relacionado pero no esencial: barras laterales, entradas relacionadas, cajas de autor o publicidad.
header y footer
No son solo la cabecera y el pie de la web. Puedes usarlos dentro de un article para su título y metadatos, o para la firma del autor al final.
nav
Para los bloques de navegación importantes: menú principal, migas de pan o menú del pie. No hace falta envolver cada lista de enlaces que aparezca en el contenido.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Ejemplo de estructura completa
<body> <header> <nav>…menú principal…</nav> </header> <main> <article> <header> <h1>Título del post</h1> </header> <section> <h2>Primer apartado</h2> <p>…</p> </section> <footer>…autor y fecha…</footer> </article> <aside>…contenidos relacionados…</aside> </main> <footer>…pie de la web…</footer> </body>Errores habituales
- Varios
mainen la misma página. - Meter el menú o el pie dentro de
main, cuando es contenido repetido. - Usar
sectioncomo sustituto dediv: si no tiene encabezado, no es una sección. - Envolver cada lista de enlaces en
nav, lo que añade ruido para los lectores de pantalla. - Confundir
sectionyarticle: lo autónomo esarticle. - Sustituir botones y enlaces reales por
divcon eventos de clic. - Pensar que esto sustituye a los datos estructurados: son cosas distintas y complementarias.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Y en WordPress, ¿qué?
La buena noticia: casi todo depende de tu plantilla. Los themes bien hechos ya generan una estructura semántica correcta.
- Elige una plantilla ligera y bien construida, como te explico en mejores plantillas de WordPress.
- Cuidado con los maquetadores: tienden a generar muchos
divanidados. Te lo cuento en errores SEO con Elementor. - Utiliza los bloques nativos cuando puedas, que generan HTML más limpio.
- Revisa el código fuente de tu web para ver qué estructura sale de verdad.
PD. Un apunte práctico sobre enlaces: los que están en menús, pies y barras laterales se repiten en toda la web y tienen menos peso que los enlaces dentro del contenido. No es que no cuenten, es que no valen lo mismo. Lo explico en enlazado interno.
Cómo comprobar tu estructura
- Mira el código fuente y busca
main,articleynav. - Usa la pestaña de accesibilidad de las herramientas de desarrollo para ver el árbol que percibe un lector de pantalla.
- Navega solo con el teclado y comprueba que puedes recorrer la página.
- Pasa un validador de accesibilidad, como mi test de accesibilidad web.
Conclusiones
El HTML semántico no va a subirte diez posiciones, pero hace tu página web más accesible, más fácil de mantener y más comprensible para buscadores y asistentes de IA.
Mi recomendación: no te obsesiones con marcar cada elemento. Con un main bien puesto, los article donde corresponde y no meter el menú en el contenido principal, ya has hecho el 90% del trabajo.
Si quieres una página web bien construida desde el código, puedo ayudarte con mi servicio de diseño web WordPress. Y si quieres saber qué está fallando en la tuya, te lo analizo en una auditoría SEO.
Ahora te toca a ti, querido lector. ¿Cuántos main tiene tu página? ¡Te leo en los comentarios!
Preguntas frecuentes sobre el HTML semántico
¿Qué es el HTML semántico?
Es el uso de etiquetas que describen el papel de cada parte del contenido, como header, main, article o footer, en lugar de resolverlo todo con etiquetas genéricas como div.
¿Mejora el HTML semántico el posicionamiento?
No es un factor de posicionamiento directo. Lo que hace es facilitar que los buscadores distingan el contenido principal del repetido y mejorar mucho la accesibilidad, que sí afecta a la experiencia.
¿Cuál es la diferencia entre section y article?
Article se utiliza para contenido que tendría sentido por sí solo fuera de la página, como un post o una ficha de producto. Section agrupa contenido relacionado dentro del documento y debe llevar encabezado.
¿Cuántas etiquetas main puede haber?
Solo una visible por página. Debe contener el contenido único de esa página, sin incluir cabecera, menú, pie ni barra lateral, que son elementos repetidos en toda la web.
¿Cuándo se usa aside?
Para contenido relacionado con el principal pero no esencial: barras laterales, entradas relacionadas, cajas de autor o publicidad. No debe utilizarse para contenido importante de la página.
¿Hay que sustituir todos los div?
No. El div sigue siendo válido para agrupar elementos por motivos de diseño. Se trata de usar etiquetas semánticas cuando el bloque tiene un papel claro dentro de la estructura.
¿Cómo afecta el maquetador que utilizo?
Bastante. Los maquetadores visuales tienden a generar muchos div anidados. Elegir una plantilla bien construida y simplificar la estructura de las páginas ayuda a mantener un código más limpio.
