Etiquetas semánticas en HTML (2025): qué son, para qué sirven y cómo usarlas

Por /

Etiquetas semánticas HTML en 2025: qué son, cómo usarlas y ejemplos prácticos

Puede que no lo notes a primera vista, pero el uso correcto de las etiquetas semánticas HTML marca la diferencia entre una web hecha a martillazos y una estructurada con mimo.

Además de ayudar al SEO y mejorar la accesibilidad, las etiquetas semánticas hacen que tu código tenga más sentido, como si en vez de un bloque de LEGO genérico usaras piezas con forma. Vamos a ver el listado actualizado para 2025, con sus funciones, ejemplos y algunos truquillos.

¿Por qué usar etiquetas semánticas?

  • Ayuda al SEO: los motores de búsqueda comprenden mejor el contenido.
  • Accesibilidad: los lectores de pantalla interpretan la estructura correctamente.
  • Mantenibilidad: tu yo del futuro (o tu compi de equipo) te lo agradecerá.
  • Estándares: es lo que toca. HTML5 lleva años empujando en esa dirección.

Listado de etiquetas semánticas

Aquí tienes el listado de etiquetas semánticas HTML más relevantes hoy en día:

Etiqueta¿Para qué sirve?Ejemplo de uso
<header>Cabecera de página o sección. Suele incluir logo, título y navegación.<header><h1>Blog</h1><nav>...</nav></header>
<nav>Contenedor de enlaces de navegación principales.<nav><ul><li><a href="/">Inicio</a></li></ul></nav>
<main>Contenido principal de la página (¡solo uno por documento!).<main><article>...</article></main>
<section>Agrupa contenido temáticamente relacionado.<section><h2>Sobre mí</h2><p>...</p></section>
<article>Contenido independiente como un post, review, noticia, etc.<article><h2>Título</h2><p>...</p></article>
<aside>Contenido lateral o complementario (ej. widgets, links extra).<aside><h4>Posts recientes</h4>...</aside>
<footer>Pie de página o de sección. Ideal para info legal, redes o contacto.<footer><p>© 2025</p></footer>
<figure> + <figcaption>Imágenes con leyenda. Mejora el contexto visual.<figure><img src="img.jpg"><figcaption>Descripción</figcaption></figure>
<time>Fechas u horas que tengan sentido semántico.<time datetime="2025-09-30">30 sep 2025</time>
<mark>Resalta texto relevante (ej. búsqueda o énfasis).<p>Resultado: <mark>HTML semántico</mark></p>
<details> + <summary>Acordeón desplegable para contenido oculto.<details><summary>Ver más</summary><p>Texto oculto</p></details>
<dialog>Ventana modal nativa (¡sí, HTML tiene esto!).<dialog open><p>Hola mundo</p></dialog>
<address>Información de contacto o autoría.<address><a href="mailto:yo@mail.com">yo@mail.com</a></address>
<blockquote>Cita larga con fuente opcional.<blockquote cite="https://ejemplo.com">Texto citado</blockquote>

Buenas prácticas para usarlas como un pro

  • No pongas etiquetas semánticas por poner. Si no aporta estructura o sentido, un div sigue siendo válido.
  • Un solo <main> por documento. No te emociones y lo repitas.
  • Usa datetime con <time> si quieres que los bots y máquinas lo lean bien.
  • Combínalas con aria-* si te metes con accesibilidad avanzada.
  • No abuses de <section> sin título. Si no tiene heading (<h2>, <h3>…), quizás no necesitas una sección.

Ejemplo práctico

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Ejemplo de HTML semántico</title>
  </head>
  <body>
    <header>
      <h1>Mi Blog</h1>
      <nav>
        <ul>
          <li><a href="/">Inicio</a></li>
          <li><a href="/blog">Artículos</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <article>
        <h2>Mi primer post</h2>
        <p>Publicado el <time datetime="2025-09-30">30 de septiembre de 2025</time></p>
        <section>
          <h3>Introducción</h3>
          <p>Hablemos de etiquetas semánticas HTML...</p>
        </section>
      </article>

      <aside>
        <h4>Artículos relacionados</h4>
        <ul>
          <li><a href="/html-basico">HTML básico</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <address>
        Escrito por <a href="mailto:dev@ejemplo.com">dev@ejemplo.com</a>
      </address>
      <p>© 2025 - Todos los derechos reservados</p>
    </footer>
  </body>
</html>

Reforzando conceptos clave

  • Las etiquetas semánticas HTML no solo organizan visualmente, sino que dan significado al contenido.
  • Son fundamentales para accesibilidad, posicionamiento y mantenimiento del código.
  • Usarlas bien demuestra un enfoque profesional y moderno del desarrollo web.

Related Posts

Scroll al inicio