El HTML semántico es el uso de etiquetas HTML que aportan significado y contexto al contenido que encierran, más allá de su simple apariencia visual.
La idea es que, en lugar de usar contenedores genéricos que no dicen nada sobre lo que llevan dentro, utilizamos etiquetas específicas que explican la función de cada bloque de nuestra página.
¿Por qué es importante usar HTML Semántico?
Quizás estéis pensando que, si visualmente la página se ve igual usando <div> que usando un <article>, para qué complicarse la vida aprendiendo etiquetas nuevas.
Existen dos motivos
Accesibilidad
Los lectores de pantalla que utilizan las personas con discapacidad visual leen estas etiquetas para ayudarles a navegar. Si usáis un <nav>, la máquina sabe decirle al usuario “Aquí tienes un menú”. Si usáis un <div>, el usuario no tendrá ni idea de qué es esa lista de enlaces.
SEO (Posicionamiento en buscadores)
Los robots de Google son ciegos. No ven lo bonita que os ha quedado la página con CSS; solo leen vuestro código HTML. Si ponéis vuestro texto más importante dentro de un <article> y un <main>, Google entenderá que eso es lo relevante y os posicionará mejor.
Etiquetas semánticas
La etiqueta div (de division) es un contenedor genérico. Sirve para agrupar cosas, pero no aporta ningún tipo de información sobre qué tipo de contenido está agrupando.
Al usar un <div> para la cabecera, otro para el menú de navegación, otro para el contenido principal y veinte más para los artículos, el código de la página se hace mucho más dificil de entender.
Para solucionar esto, el estándar HTML5 introdujo una serie de etiquetas estructurales que funcionan exactamente igual que un div, pero con nombre propio.
Las etiquetas estructurales principales
Vamos a repasar las piezas fundamentales que debéis usar a partir de ahora para maquetar el esqueleto de vuestras páginas web.
Representa la cabecera introductoria de la página o de una sección. Normalmente es donde colocamos el logotipo de la web, el título principal y, a veces, un buscador o botones de acceso.
También puede aparecer dentro de un <article> o una <section> para presentar ese bloque concreto. Por ejemplo, una tarjeta de noticia podría tener su propio <header> con el título, la fecha y el autor.
(No lo confundáis con el <head> que vimos al principio, que es la cabecera técnica e invisible del documento).
Como su nombre indica, agrupa los enlaces de navegación principales del sitio. Ese menú superior con sus listas desordenadas que vimos en el artículo anterior, debería ir siempre envuelto dentro de un <nav>.
No hace falta usar <nav> para cualquier grupo de enlaces. Por ejemplo, una lista de enlaces sueltos dentro del contenido puede quedarse como una lista normal. Reservadlo para bloques que realmente ayuden al usuario a moverse por la web.
Es el contenedor más importante a nivel de contenido. Define el bloque principal y único de información de esa página concreta.
Todo lo que sea el “meollo” del asunto (el texto de un artículo, los productos de una tienda, el contenido de una herramienta o el listado principal de una página) debe ir aquí dentro.
Solo debe haber un único <main> visible por documento, y no debe contener cosas que se repiten en otras páginas, como barras laterales, pies de página o menús principales.
Sirve para agrupar un bloque de contenido temático dentro de vuestra página. Por ejemplo, en una página de inicio, podríais tener una <section> para “Nuestros servicios”, otra para “Testimonios” y otra para “Contacto”.
Una buena regla práctica es que una <section> normalmente debería poder tener su propio encabezado. Si solo estáis agrupando elementos para aplicar estilos CSS, muchas veces un <div> sigue siendo una opción perfectamente válida.
Se utiliza para contenido que tiene sentido por sí mismo y podría ser distribuido de forma independiente. El ejemplo clásico es una entrada de un blog, una noticia en un periódico o la ficha de un producto en una tienda online.
La clave es pensar si ese bloque podría sacarse de la página y seguir entendiéndose por sí solo. Un comentario, una review, una receta o una publicación también podrían ser buenos candidatos para usar <article>.
Representa contenido relacionado, pero secundario respecto al contenido principal. Puede ser una barra lateral, una caja de enlaces relacionados, una nota complementaria o un bloque de información que acompaña al artículo.
No es el protagonista de la página, pero ayuda a completar el contexto. Por ejemplo, dentro de un artículo podríais usar un <aside> para mostrar enlaces recomendados, una biografía breve del autor o una aclaración adicional.
<aside>
<h2>Artículos relacionados</h2>
<ul>
<li><a href="/html-basico/">HTML básico</a></li>
<li><a href="/css-selectores/">Selectores CSS</a></li>
</ul>
</aside>
Representa el pie de página. Ese clásico bloque al final del todo donde solemos meter el aviso legal, los enlaces a redes sociales y el año de copyright (y otra información que nunca nadie leerá 🤭).
También puede usarse dentro de otros bloques, como un <article>, para incluir información de cierre: autor, fecha de publicación, enlaces relacionados o botones de compartir. No siempre tiene que ser el footer global de toda la web.
Un ejemplo completo
Visto etiqueta por etiqueta, quizá parece que el HTML semántico es una lista de nombres nuevos para memorizar. Pero en la práctica se entiende mejor cuando vemos todas las piezas trabajando juntas.
<body>
<header>
<h1>Mi blog de tecnología</h1>
<nav>
<a href="/">Inicio</a>
<a href="/articulos/">Artículos</a>
<a href="/contacto/">Contacto</a>
</nav>
</header>
<main>
<article>
<h2>Cómo empezar con HTML semántico</h2>
<p>El HTML semántico ayuda a estructurar mejor nuestras páginas.</p>
</article>
</main>
<footer>
<p>© 2026 Mi blog de tecnología</p>
</footer>
</body>
Fijaos en que no hemos eliminado los contenedores. Lo que hemos hecho es elegir contenedores con significado. El navegador, los lectores de pantalla y cualquier persona que lea el código entienden mucho mejor qué papel tiene cada parte.
