Web semántica - Etiqueta ASIDE y FIGURE

5.7 Web semántica - Etiqueta ASIDE y FIGURE

Introducción al Apartado

Dentro del contexto de las estructuras básicas en HTML5, la incorporación de elementos semánticos ha supuesto una evolución significativa en la manera en que estructuramos y organizamos el contenido de las páginas web. En particular, las etiquetas <aside> y <figure> representan componentes fundamentales para mejorar la accesibilidad, la comprensión del contenido por parte de los motores de búsqueda y la mantenibilidad del código. Estas etiquetas permiten definir bloques de contenido con significado específico, facilitando su interpretación tanto para los navegadores como para los usuarios y desarrolladores.

El uso correcto de estas etiquetas contribuye a una web más estructurada, semánticamente enriquecida y accesible, alineándose con los principios de la web semántica. La comprensión profunda de <aside> y <figure>, sus diferencias, funciones y mejores prácticas, es esencial en un nivel intermedio de HTML5, ya que permite crear páginas más profesionales, coherentes y optimizadas para diferentes contextos de uso.

Este apartado tiene como objetivos específicos: definir claramente ambas etiquetas, analizar su función semántica en el documento HTML, explorar ejemplos prácticos que ilustren su correcta utilización y discutir consideraciones importantes para su empleo efectivo en proyectos reales. La importancia práctica radica en que estos elementos no solo mejoran la estructura visual del contenido, sino que también potencian su significado contextual, favoreciendo la accesibilidad y el posicionamiento SEO.

Marco Teórico y Fundamentos

Definiciones y Conceptos Clave

<aside>: Es un elemento semántico que representa una sección del contenido que está relacionada tangencialmente con el contenido principal del documento. Se emplea para incluir información adicional, notas, enlaces relacionados o contenidos complementarios que no forman parte del flujo principal del documento. La etiqueta <aside> ayuda a separar claramente contenidos secundarios o complementarios del resto del contenido principal.

<figure>: Es un elemento semántico utilizado para agrupar contenido visual o multimedia, generalmente acompañado de un pie de figura (<figcaption>). Se emplea para incluir imágenes, gráficos, diagramas, ilustraciones o cualquier elemento multimedia que tenga un significado autónomo dentro del contenido. La etiqueta <figure> permite contextualizar la imagen o elemento multimedia dentro del documento.

Ambas etiquetas contribuyen a mejorar la estructura lógica del documento HTML, facilitando su interpretación por parte de navegadores, motores de búsqueda y tecnologías asistivas.

Teorías y Principios

El uso de elementos semánticos en HTML5 se fundamenta en el principio de separación entre la estructura lógica del contenido y su presentación visual. Esto permite que los navegadores puedan interpretar correctamente el significado del contenido y presentarlo de manera adecuada. Además, fomenta la accesibilidad mediante tecnologías asistivas como lectores de pantalla.

Desde una perspectiva técnica, <aside> se considera un contenedor para contenidos relacionados pero no esenciales al flujo principal. Su función es ofrecer información adicional sin interrumpir la narrativa principal. Por ejemplo, notas al margen o enlaces relacionados.

Por otro lado, <figure> actúa como un contenedor autónomo que puede incluir elementos multimedia junto con una descripción textual (<figcaption>). Esto favorece la contextualización visual del contenido multimedia, mejorando su comprensión.

Estas etiquetas siguen los principios definidos por las especificaciones oficiales de HTML5 y están alineadas con las recomendaciones internacionales sobre accesibilidad y buenas prácticas en desarrollo web.

Desarrollo Teórico

<aside>: Se recomienda utilizar esta etiqueta cuando se desea incluir contenido adicional que complementa el contenido principal pero no es esencial para su comprensión inmediata. Ejemplos típicos incluyen barras laterales con enlaces relacionados, anuncios publicitarios o notas aclaratorias.

<article>
  <p>El artículo principal trata sobre técnicas avanzadas en HTML5.</p>
  <aside>
    <p>Nota: Este apartado contiene información adicional que puede ser útil pero no es imprescindible.</p>
  </aside>
</article>

<figure>: Se emplea cuando se desea incluir elementos visuales o multimedia con un significado independiente dentro del flujo del documento. La etiqueta <figcaption> proporciona una descripción o leyenda para contextualizar la figura.

<figure>
  <img src="grafico.png" alt="Gráfico de tendencias" />
  <figcaption>Figura 1: Tendencias de crecimiento en el sector tecnológico.</figcaption>
</figure>

Es importante destacar que estos elementos deben usarse con sentido lógico y coherente, evitando su empleo excesivo o incorrecto que pueda afectar la accesibilidad o la estructura semántica del documento.

Relaciones y Contexto

Las etiquetas <aside> y <figure> complementan otras estructuras semánticas como <section>, <article>, <header>, <footer>, entre otras. Mientras las últimas definen bloques principales o estructurales del documento, <aside> se reserva para contenidos tangenciales o complementarios.

<figure>, por su parte, puede insertarse dentro de cualquier sección o artículo para aportar elementos visuales relevantes. La correcta combinación de estos elementos favorece una organización lógica coherente que refleja fielmente el significado contextual del contenido.

Desde el punto de vista técnico, estas etiquetas mejoran la interoperabilidad entre diferentes dispositivos y tecnologías asistivas al proporcionar un marcado explícito sobre qué partes del contenido son complementarias o visuales independientes.

Ejemplos Aplicados

Ejemplo 1: Caso práctico básico con explicación paso a paso

<article>
  <h2>Historia del HTML</h2>
  <p>HTML ha evolucionado desde sus inicios hasta convertirse en HTML5.</p>
  <aside class="nota">
    <p>Este apartado proporciona datos adicionales sobre versiones anteriores.</p>
  </aside>
</article>

En este ejemplo simple, se incluye un artículo principal sobre historia del HTML con una nota adicional contenida en un <aside>. La nota no interrumpe la lectura principal pero aporta información complementaria útil para quienes desean profundizar.

Ejemplo 2: Situación real del ámbito profesional

<section id="proyecto">
  <h2>Informe técnico</h2>
  <p>Este informe detalla las especificaciones técnicas del proyecto.</p>
  <aside class="aviso">
    <p>Nota: El plazo estimado para completar este proyecto es de seis meses.</p>
  </aside>
  <p class="detalles">El equipo trabaja bajo metodologías ágiles.</p>
</section>

Aquí se utiliza <aside> para destacar una advertencia importante relacionada con el proyecto sin alterar el flujo principal del informe técnico. Es útil en documentos profesionales donde se requiere separar información secundaria pero relevante.

Ejemplo 3: Caso complejo que integre varios conceptos

<article class="articulo-completo">
  <header><h1>título principal</h1>                                        

  <p>textos principales...</p>

  <section id="galeria">
    <h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</h2&g;título sección</section&g;

    >