Tutorial HTML: Etiquetas semánticas (article, section, header, footer, nav, aside)

Las etiquetas semánticas de HTML5 brindan un significado adicional a la información contenida en ellas. Con esto, se proporciona a los motores de búsqueda y a las tecnologías de asistencia, como los lectores de pantalla, un contexto más rico sobre el contenido de la página web. Aquí se explican algunas de las etiquetas semánticas más comunes en HTML5: <article>, <section>, <header>, <footer>, <nav> y <aside>.

1. <article>: Esta etiqueta representa un bloque de contenido independiente y autónomo que tiene sentido por sí mismo. Puede ser un artículo de blog, una entrada de foro, una noticia, etc.

   Ejemplo:

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

2. <section>: Define una sección en un documento. Se usa para agrupar contenido temáticamente coherente. Cada <section> debe venir acompañada de un título.

   Ejemplo:

   <section>
       <h1>Título de la sección</h1>
       <p>Contenido de la sección...</p>
   </section>
   

3. <header>: Se usa para contener la introducción o los elementos de navegación de una página o sección. Puede contener elementos como el logotipo del sitio, el título del sitio web, enlaces de navegación, etc.

   Ejemplo:

   <header>
       <h1>Título de la página</h1>
       <nav>
           <a href="#">Enlace 1</a> | <a href="#">Enlace 2</a>
       </nav>
   </header>
   

4. <footer>: Define el pie de página de una página o sección. Generalmente contiene información como el autor del documento, derechos de autor, enlaces a términos de servicio, etc.

   Ejemplo:

   <footer>
       <p>&copy; 2023 - Mi Página Web</p>
   </footer>
   

5. <nav>: Esta etiqueta está destinada a envolver elementos de navegación principales. En general, contiene una lista de enlaces a otras páginas del sitio.

   Ejemplo:

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

6. <aside>: Representa un bloque de contenido relacionado indirectamente con el contenido principal del documento. Podría considerarse contenido secundario, como barras laterales, publicidad, biografías, etc.

   Ejemplo:

   <aside>
       <h2>Información adicional</h2>
       <p>Este es un contenido secundario relacionado con el artículo principal...</p>
   </aside>
   

Es importante mencionar que aunque estas etiquetas semánticas añaden significado al contenido, no afectan directamente la presentación de este. La apariencia de estos elementos en la página web se controla con CSS.