Qué es HTML semántico y cómo usarlo correctamente

El HTML semántico consiste en utilizar los elementos HTML según el significado y la función del contenido que representan, no únicamente por la apariencia visual que producen en el navegador.

Por ejemplo, <nav> indica una zona de navegación, <main> identifica el contenido principal y <article> representa una composición que puede tener sentido de forma independiente.

Utilizar correctamente estos elementos ayuda a construir documentos más comprensibles para desarrolladores, navegadores y tecnologías de asistencia. También permite que los motores de búsqueda procesen el contenido dentro de una estructura HTML más clara.

Qué es HTML semántico

La semántica en HTML consiste en elegir el elemento que mejor describe el propósito del contenido.

Por ejemplo:

<nav>
  <a href="/servicios/">Servicios</a>
  <a href="/blog/">Blog</a>
</nav>

El elemento <nav> comunica que ese bloque cumple una función de navegación.

En cambio:

<div class="menu">
  <a href="/servicios/">Servicios</a>
  <a href="/blog/">Blog</a>
</div>

puede verse exactamente igual mediante CSS, pero el elemento <div> no aporta por sí mismo información sobre el propósito del bloque.

Qué diferencia hay entre HTML semántico y no semántico

Los elementos semánticos expresan qué representa el contenido.

Elementos como estos tienen un significado concreto:

• <article>
• <nav>
• <main>
• <section>
• <aside>
• <header>
• <footer>
• <figure>
• <time>

Otros elementos como <div> y <span> son contenedores genéricos.

Eso no significa que <div> o <span> sean incorrectos. Son apropiados cuando no existe un elemento semántico que describa mejor la función del contenido.

Cuáles son las principales etiquetas semánticas HTML

Cómo utilizar header correctamente

El elemento <header> representa contenido introductorio o ayudas de navegación.

Puede utilizarse como cabecera general de una página:

<header>
  <h1>MargetC</h1>
  <nav>...</nav>
</header>

Pero también puede existir dentro de un artículo:

<article>
  <header>
    <h2>Guía de HTML semántico</h2>
    <p>Publicado por MargetC</p>
  </header>

  <p>Contenido del artículo...</p>
</article>

Por eso no es correcto establecer como regla que una página siempre deba contener un único <header>.

Cómo utilizar nav correctamente

<nav> representa una sección cuyo propósito principal es proporcionar enlaces de navegación.

Puede utilizarse para:

• Menú principal.
• Índice de un artículo.
• Navegación secundaria relevante.
• Migas de navegación cuando la implementación lo requiere.

No todos los grupos de enlaces necesitan estar dentro de un <nav>.

Por ejemplo, una pequeña lista de enlaces legales en el footer puede existir perfectamente sin envolverla en otro elemento <nav>.

Para qué sirve main

<main> representa el contenido dominante del documento.

Normalmente contiene aquello que responde directamente al propósito principal de la página.

Por ejemplo:

<body>
  <header>...</header>

  <main>
    <h1>Qué es HTML semántico</h1>
    <p>Contenido principal...</p>
  </main>

  <footer>...</footer>
</body>

Elementos repetidos en diferentes páginas, como navegación global o footer general, normalmente quedan fuera de <main>.

Diferencia entre article y section

Esta es una de las dudas más frecuentes.

Cuándo utilizar article

<article> representa una composición relativamente independiente.

Puede ser apropiado para:

• Artículo de blog.
• Noticia.
• Comentario.
• Publicación de foro.
• Ficha que pueda reutilizarse independientemente.

Cuándo utilizar section

<section> representa una sección temática del documento cuando no existe un elemento más específico.

Una sección normalmente debería tener un encabezado que explique su tema.

Por ejemplo:

<article>
  <h1>Guía de SEO técnico</h1>

  <section>
    <h2>Rastreo</h2>
    <p>...</p>
  </section>

  <section>
    <h2>Indexación</h2>
    <p>...</p>
  </section>
</article>

Cuándo utilizar div

No es necesario sustituir todos los <div> por elementos semánticos.

<div> continúa siendo útil como contenedor genérico cuando el bloque no posee un significado semántico específico.

Por ejemplo, puede utilizarse para:

• Crear estructuras de layout.
• Agrupar componentes para CSS.
• Aplicar comportamiento mediante JavaScript.
• Construir wrappers visuales.

El problema no es utilizar <div>. El problema es utilizarlo cuando existe un elemento más adecuado para representar claramente el contenido.

Qué función cumple aside

<aside> representa contenido relacionado de manera indirecta con el contenido que lo rodea.

Puede utilizarse para:

• Biografía del autor.
• Glosario relacionado.
• Contenido complementario.
• Referencias relacionadas.
• Información secundaria.

No significa obligatoriamente que el contenido deba aparecer visualmente en una barra lateral.

La posición visual se controla mediante CSS.

Cómo utilizar figure y figcaption

<figure> permite agrupar contenido ilustrativo junto con una leyenda opcional.

Por ejemplo:

<figure>
  <img
    src="estructura-html.webp"
    alt="Ejemplo de estructura HTML semántica"
  >
  <figcaption>
    Ejemplo de una estructura semántica básica
  </figcaption>
</figure>

Puede emplearse con imágenes, diagramas, fragmentos de código u otros contenidos que funcionen como una unidad relacionada con el documento.

Cómo utilizar time

<time> permite representar fechas y horas de una manera semánticamente identificable.

Por ejemplo:

<time datetime="2026-10-14">
  14 de octubre de 2026
</time>

El atributo datetime permite incluir una representación legible por máquina mientras el usuario ve una fecha escrita naturalmente.

Cómo organizar los encabezados H1 H2 y H3

Los encabezados deben representar la jerarquía del contenido.

Una estructura sencilla podría ser:

<h1>Qué es HTML semántico</h1>

<h2>Principales etiquetas semánticas</h2>

<h3>Article</h3>
<h3>Section</h3>

<h2>HTML semántico y accesibilidad</h2>

No deberían elegirse los niveles únicamente porque un H2 se ve más grande que un H3.

La apariencia visual debe controlarse mediante CSS.

HTML semántico y accesibilidad

Una de las ventajas más importantes del HTML semántico está relacionada con la accesibilidad.

Algunos elementos HTML exponen información semántica que las tecnologías de asistencia pueden utilizar para identificar zonas de una página.

Por ejemplo:

• <main> identifica el contenido principal.
• <nav> identifica navegación.
• Los encabezados permiten recorrer la estructura del documento.
• <header> y <footer> pueden aportar landmarks dependiendo de su contexto.

Esto puede facilitar que una persona que utiliza un lector de pantalla navegue directamente entre diferentes partes del documento.

HTML semántico y ARIA

ARIA puede añadir información de accesibilidad cuando los elementos HTML disponibles no son suficientes.

Pero no debería utilizarse para reemplazar innecesariamente elementos nativos.

Por ejemplo, suele ser preferible:

<button>Enviar</button>

que intentar convertir un <div> en un botón mediante atributos adicionales y JavaScript.

La semántica nativa normalmente proporciona comportamiento y accesibilidad que de otra manera tendrían que implementarse manualmente.

HTML semántico mejora el SEO

El HTML semántico es una buena práctica de desarrollo y Google recomienda utilizar marcado HTML semántico cuando sea posible.

Sin embargo, eso no significa que utilizar <article> en lugar de <div> vaya a generar automáticamente una mejora de posiciones.

Su beneficio SEO debe entenderse principalmente desde la estructura y comprensión del documento.

Google también necesita elementos mucho más amplios para evaluar una página, como:

• Contenido útil.
• Relevancia.
• Rastreabilidad.
• Indexación.
• Enlazado.
• Calidad general.

El HTML semántico es una pieza de esa implementación técnica, no una estrategia completa de posicionamiento.

HTML semántico ayuda a Google a entender una página

Una estructura HTML clara puede ayudar a representar correctamente los diferentes componentes del documento.

Por ejemplo, Google recomienda mantener el contenido textual accesible en el DOM y utilizar HTML semántico siempre que sea posible.

Pero no deberíamos interpretar esto como una señal de ranking aislada.

La utilidad principal es proporcionar una representación técnicamente clara del contenido.

HTML semántico y GEO

La misma lógica puede aplicarse al contenido destinado a experiencias generativas.

No existe una etiqueta HTML especial que garantice aparecer en respuestas de inteligencia artificial.

Sin embargo, utilizar una estructura coherente contribuye a que la información publicada sea técnicamente clara y accesible.

Para SEO y GEO siguen siendo importantes aspectos como:

• Definiciones precisas.
• Contenido verificable.
• Entidades claramente identificadas.
• Encabezados descriptivos.
• Información original.
• Fuentes cuando corresponda.

HTML semántico ayuda a estructurar esa información, pero no sustituye su calidad.

Ejemplo completo de HTML semántico

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1"
  >
  <title>Qué es HTML semántico</title>
</head>

<body>

  <header>
    <a href="/">MargetC</a>

    <nav aria-label="Navegación principal">
      <ul>
        <li><a href="/servicios/">Servicios</a></li>
        <li><a href="/blog/">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>

    <article>

      <header>
        <h1>Qué es HTML semántico</h1>
        <p>
          Publicado el
          <time datetime="2026-10-14">
            14 de octubre de 2026
          </time>
        </p>
      </header>

      <section>
        <h2>Principales etiquetas semánticas</h2>
        <p>Contenido...</p>
      </section>

      <section>
        <h2>HTML semántico y accesibilidad</h2>
        <p>Contenido...</p>
      </section>

      <aside>
        <h2>Contenido relacionado</h2>
        <p>Información complementaria...</p>
      </aside>

      <footer>
        <p>Artículo publicado por MargetC</p>
      </footer>

    </article>

  </main>

  <footer>
    <p>MargetC</p>
  </footer>

</body>
</html>

Errores frecuentes con HTML semántico

• Utilizar <section> como sustituto de cualquier <div>.
• Pensar que solo puede existir un <header>.
• Utilizar <nav> para cualquier conjunto de enlaces.
• Elegir headings por su tamaño visual.
• Usar <aside> únicamente porque un elemento aparece a un lado.
• Crear secciones sin una razón temática.
• Añadir ARIA cuando HTML nativo ya resuelve la semántica.
• Suponer que las etiquetas semánticas generan mejores rankings automáticamente.

Cómo revisar si una página utiliza HTML semántico

Una revisión sencilla puede comprobar:

1. Si existe un contenido principal claramente identificado.
2. Si los encabezados reflejan la estructura real.
3. Si los bloques importantes utilizan elementos apropiados.
4. Si los menús principales están correctamente identificados.
5. Si el contenido independiente utiliza <article> cuando corresponde.
6. Si se utilizan <div> únicamente cuando no existe una opción semántica más apropiada.
7. Si el código continúa siendo válido.

También pueden utilizarse herramientas de validación HTML y accesibilidad para detectar problemas adicionales.

Por qué utilizar HTML semántico

HTML semántico ayuda a construir páginas cuyo código refleja mejor la función de cada elemento.

Eso puede aportar ventajas en accesibilidad, mantenimiento, colaboración entre desarrolladores y comprensión estructural del documento.

Para SEO también forma parte de una implementación técnica correcta, pero no debería utilizarse como una técnica aislada para intentar subir posiciones.

La mejor implementación es aquella en la que cada elemento se selecciona porque representa correctamente el contenido que contiene.