Semantic Tags (<header>, <nav>, <article>, <section>, <footer>, etc.) in HTML

Las etiquetas semánticas en HTML son elementos especiales que se utilizan para dar un significado y estructura claros al contenido de una página web. Estas etiquetas ayudan a los motores de búsqueda y navegadores a comprender la organización y la jerarquía del contenido. Aquí tienes una descripción detallada de algunas de las etiquetas semánticas más comunes:

1. <header>: La etiqueta <header> se utiliza para definir la cabecera o encabezado de una sección o de toda la página. Puedes encontrar elementos como logotipos, títulos y menús de navegación dentro de un <header>.

<header>
    <h1>Logo</h1>
    <nav>
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</header>

2. <nav>: La etiqueta <nav> se utiliza para definir una sección de navegación. Debe contener enlaces de navegación a otras páginas o secciones de la página actual.

<nav>
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Productos</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

3. <article>: La etiqueta <article> se utiliza para marcar un contenido independiente que tiene sentido por sí mismo, como una entrada de blog, una noticia o un comentario.

<article>
    <h2>Título del artículo</h2>
    <p>Contenido del artículo...</p>
</article>

4. <section>: La etiqueta <section> se utiliza para dividir el contenido en secciones temáticas o lógicas. Ayuda a organizar el contenido de manera estructurada.

<section>
    <h2>Sección 1</h2>
    <p>Contenido de la sección 1...</p>
</section>
<section>
    <h2>Sección 2</h2>
    <p>Contenido de la sección 2...</p>
</section>

5. <footer>: La etiqueta <footer> se utiliza para definir el pie de página de una página web o una sección específica. Suele contener información de contacto, enlaces adicionales y derechos de autor.

<footer>
    <p>&copy; 2023 Mi Sitio Web. Todos los derechos reservados.</p>
    <p>Contacto: info@misitioweb.com</p>
</footer>

6. <aside>: Es importante saber que <aside> se utiliza para contenido secundario o relacionado, como barras laterales, notas al margen, publicidad o contenido no esencial para la comprensión del contenido principal.

<aside>
    <h3>Anuncios</h3>
    <p>¡Oferta especial! 50% de descuento...</p>
</aside>

Estas etiquetas semánticas ayudan a los motores de búsqueda y a las tecnologías de asistencia a comprender mejor la estructura y el contenido de una página web, lo que mejora la accesibilidad y la optimización para motores de búsqueda. Utilizarlas correctamente es una buena práctica en el desarrollo web.