Explicación de Etiquetas Semánticas en HTML

<article>

La etiqueta <article> representa un contenido independiente y auto-contenido, como una noticia, una entrada de blog o una publicación en un foro.

<article>
  <h2>Título del artículo</h2>
  <p>Este es el contenido principal del artículo.</p>
</article>

    

<section>

La etiqueta <section> agrupa contenido temáticamente relacionado. Suele usarse para dividir una página en secciones lógicas.

<section>
  <h2>Sobre nosotros</h2>
  <p>Información sobre la empresa o el autor.</p>
</section>

    

<nav>

La etiqueta <nav> define una sección que contiene enlaces de navegación. Se utiliza para menús principales o enlaces importantes dentro del sitio.

<nav>
  <ul>
    <li><a href="index.html">Inicio</a></li>
    <li><a href="contacto.html">Contacto</a></li>
  </ul>
</nav>

    

<header>

La etiqueta <header> representa la cabecera de una página o sección. Suele contener el logotipo, título, subtítulo o menú de navegación.

<header>
  <h1>Mi sitio web</h1>
  <nav>
    <a href="inicio.html">Inicio</a>
  </nav>
</header>

    

<footer>

La etiqueta <footer> representa el pie de página de un documento o sección. Suele incluir información de contacto, derechos de autor o enlaces adicionales.

<footer>
  <p>© 2025 Mi Sitio Web. Todos los derechos reservados.</p>
</footer>