El Poder de las Etiquetas Semánticas en HTML5
Las etiquetas semánticas en HTML5 no solo estructuran el contenido, sino que le dan significado, mejorando la accesibilidad y el SEO. Aquí te explicamos algunas de las más importantes.
La etiqueta `<article>`
La etiqueta `<article>` representa una pieza de contenido independiente y autocontenida, que podría ser distribuible o reutilizable. Piensa en ella como una entrada de blog, un comentario, una noticia o un elemento de un foro.
Ejemplo de uso de `<article>`:
<article>
<h2>Mi Primera Publicación</h2>
<p>Este es el contenido de mi publicación de blog.</p>
<footer>
<p>Publicado por John Doe el <time datetime="2025-01-01">1 de Enero de 2025</time></p>
</footer>
</article>
La etiqueta `<section>`
La etiqueta `<section>` representa una sección genérica de un documento. Es un agrupador temático de contenido. Un `<section>` siempre debe tener un encabezado (`<h1>` a `<h6>`) para definir su propósito.
Ejemplo de uso de `<section>`:
<section>
<h2>Acerca de Nosotros</h2>
<p>Somos una empresa dedicada a...</p>
</section>
La etiqueta `<nav>`
La etiqueta `<nav>` se utiliza para agrupar enlaces de navegación principales. No todos los grupos de enlaces son de navegación; solo aquellos que son cruciales para la navegación del sitio.
Ejemplo de uso de `<nav>`:
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/productos">Productos</a></li>
</ul>
</nav>
La etiqueta `<header>`
La etiqueta `<header>` representa contenido introductorio o un grupo de ayudas de navegación. Frecuentemente contiene un encabezado (`<h1>` a `<h6>`), un logotipo, un menú de navegación, etc.
Ejemplo de uso de `<header>`:
<header>
<h1>Mi Sitio Web</h1>
<img src="logo.png" alt="Logotipo">
<nav>...</nav>
</header>
La etiqueta `<footer>`
La etiqueta `<footer>` representa un pie de página para su contenido de sección o raíz de sección más cercano. Típicamente contiene información sobre el autor, derechos de autor, enlaces a documentos relacionados, etc.
Ejemplo de uso de `<footer>`:
<footer>
<p>© 2025 Mi Empresa</p>
<address>Contacto: info@miempresa.com</address>
</footer>
