La semántica en HTML5 es la práctica de usar etiquetas que describen el significado de cada sección de tu página, no solo su apariencia. Aprenderla te ayuda a escribir código accesible, mejor posicionado en Google y más fácil de mantener en equipo. Es un tema clave para cualquier persona que empiece en desarrollo web.

¿Qué significa la semántica en HTML?

Cuando hablamos de semántica nos referimos a que cada etiqueta tiene un nombre con significado propio. Ese nombre le dice al navegador, a los buscadores y a otros desarrolladores qué tipo de contenido vive dentro de esa sección.

La semántica no cambia lo que se ve en pantalla. Lo que cambia es cómo el navegador, los lectores de pantalla y Google interpretan tu código. Y esa diferencia, aunque invisible, pesa muchísimo.

¿Qué es la semántica en HTML? Es el uso de etiquetas con significado para describir el rol de cada sección del documento, como header, main, nav o footer, en lugar de usar solo div genéricos.

¿Cuáles son las etiquetas semánticas básicas?

Dentro del body de tu documento existen tres bloques principales que definen la estructura general de cualquier proyecto web.

• header: es el encabezado del proyecto. Aquí suele ir el logotipo, el título y la barra de navegación principal.
• main: contiene el contenido rico, eso por lo que tu usuario realmente entró a la página.
• footer: es el cierre. Suele incluir una navegación más ligera, avisos legales o un copyright como 2025, mi sitio, todos los derechos reservados.

Ojo con un detalle importante: head y header no son lo mismo. El head carga la información que el navegador necesita para renderizar el sitio. El header, en cambio, es contenido visible que vive dentro del body.

¿Cómo se usa la etiqueta nav?

La etiqueta nav representa la navegación del sitio y casi siempre vive dentro del header. Su contenido típico es una lista desordenada con enlaces.

La estructura clásica se ve así: una ul que contiene varios li, y cada li envuelve una etiqueta de ancla. Cada ancla lleva al usuario a una sección distinta, por ejemplo inicio, servicios o contacto.

html

<nav> <ul> <li><a href="#inicio">Inicio</a></li> <li><a href="#servicios">Servicios</a></li> <li><a href="#contacto">Contacto</a></li> </ul> </nav>

¿Cómo organizo el contenido principal con article, section y aside?

Dentro del main tienes etiquetas que te permiten dividir el contenido en bloques con sentido propio. No es lo mismo un artículo suelto que un grupo de artículos relacionados, y HTML te da herramientas para diferenciarlos.

• section: marca una sección específica del proyecto. Es el contenedor más amplio dentro del main.
• article: representa una pieza de contenido autocontenida. Si piensas en un blog, cada entrada vive dentro de un article.
• aside: es esa barra lateral, derecha o izquierda, que acompaña al contenido principal con información complementaria o navegación secundaria.

Una estructura típica de blog combina los tres: una section agrupa varios article, y al lado un aside ofrece filtros o enlaces relacionados.

¿Para qué sirve la etiqueta aside? Sirve para colocar contenido lateral que complementa la sección principal, como menús de filtros, enlaces relacionados o información secundaria. Va al lado del contenido, no dentro de él.

¿Por qué la semántica mejora la accesibilidad y el SEO?

La semántica tiene tres beneficios concretos que vale la pena entender por separado.

Primero, accesibilidad. Los lectores de pantalla que usan personas con problemas visuales se apoyan en estas etiquetas para anunciar dónde está el usuario: estás en el header, contiene una barra de navegación con tres enlaces. Sin etiquetas semánticas, ese software no sabría cómo guiar a la persona.

Segundo, SEO. Google indexa tu página leyendo su estructura. Cuando usas header, main, article y footer correctamente, le facilitas al buscador entender qué es importante en tu sitio y recomendarlo en búsquedas relevantes.

Tercero, trabajo en equipo. Si un compañero te pide modificar la barra de navegación, sabe exactamente dónde buscar: dentro del header, en el nav. Si te dice que cambies el formulario del contenido principal, va directo al main. Eso ahorra horas de lectura de código.

¿Cómo se ve una estructura semántica completa?

Uniendo todo lo anterior, una página con semántica básica en HTML5 luce así.

html

<body> <header> <h1>Mi sitio web</h1> <nav> <ul> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </header> <main> <section> <article><p>Contenido del artículo.</p></article> </section> <aside>Contenido lateral.</aside> </main> <footer> <p>2025, mi sitio, todos los derechos reservados</p> </footer> </body>

Esta misma estructura te servirá más adelante cuando empieces a trabajar con CSS, porque cada sección semántica se convierte en un punto de anclaje natural para tus estilos. ¿Ya estás aplicando semántica en tus proyectos? Cuéntame en los comentarios qué etiquetas usas más.