Web semántica - Etiqueta ASIDE y FIGURE
¿Te está gustando el curso?
Regístrate gratis para guardar tu progreso y obtener tu certificado al finalizar
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 un avance fundamental para mejorar la organización, accesibilidad y comprensión del contenido web. En particular, las etiquetas <aside> y <figure> representan componentes esenciales en la construcción de páginas con significado explícito, facilitando tanto a los desarrolladores como a los motores de búsqueda la interpretación del contenido.
Este apartado se sitúa en un momento clave del curso, ya que profundiza en la utilización de elementos que aportan valor semántico, complementando las etiquetas estructurales vistas previamente y preparando el terreno para el diseño de páginas más accesibles y semanticamente enriquecidas. La correcta aplicación de <aside> y <figure> permite separar contenidos relacionados o complementarios, así como agrupar elementos visuales o ilustrativos con su respectivo pie de foto o descripción.
Los objetivos específicos de este apartado son comprender en profundidad las funciones y usos adecuados de estas etiquetas, analizar su impacto en la accesibilidad y SEO, y aprender a implementarlas correctamente mediante ejemplos prácticos. La importancia práctica radica en que estas etiquetas no solo mejoran la estructura visual sino que también contribuyen a una mejor interpretación del contenido por parte de los usuarios y los motores de búsqueda, alineándose con las tendencias actuales en desarrollo web semántico.
Marco Teórico y Fundamentos
Definiciones y Conceptos Clave
<aside>: Es un elemento semántico que representa contenido adicional o secundario, separado del contenido principal pero relacionado con él. Se emplea para información complementaria, notas, enlaces relacionados o anuncios, que no forman parte del flujo principal del documento.
<figure>: Es un contenedor para contenido gráfico o multimedia, como imágenes, ilustraciones, diagramas o vídeos, acompañados opcionalmente por una leyenda (<figcaption>). Su función es agrupar visuales con su descripción contextual.
Teorías y Principios
Las etiquetas <aside> y <figure> se fundamentan en los principios del HTML5 semantic markup, que busca dotar a la estructura del documento de significado explícito. Esto favorece la accesibilidad (por ejemplo, lectores de pantalla), mejora el SEO (posicionamiento en buscadores) y facilita el mantenimiento del código.
Desde una perspectiva técnica, estos elementos cumplen con la especificación W3C, que define su comportamiento y relación con otros elementos. La separación semántica permite que los navegadores interpreten correctamente el contenido, diferenciando entre el flujo principal y los contenidos complementarios o visuales.
Desarrollo Teórico
<aside>: Se considera un elemento block-level, que puede contener otros elementos estructurales o en línea. Se emplea típicamente para incluir información secundaria como notas al margen, enlaces relacionados o anuncios. Por ejemplo, en un artículo sobre hidrotermalismo, un <aside> podría incluir enlaces a recursos adicionales o definiciones técnicas relacionadas.
<figure>: También es un elemento block-level, diseñado para envolver contenido visual junto con su leyenda (<figcaption>). Es útil para ilustraciones científicas, diagramas o fotografías relacionadas con el contenido principal. La relación entre la imagen y su descripción queda claramente establecida mediante este contenedor.
Ambos elementos permiten separar visualmente y semánticamente diferentes tipos de contenido dentro de una página web. La correcta utilización requiere entender cuándo un contenido es secundario o complementario (<aside>) o cuando se trata de un elemento visual acompañado por una descripción (<figure>). Esto contribuye a mejorar la estructura lógica del documento y facilita su interpretación por agentes automatizados.
Relaciones y Contexto
Estas etiquetas se relacionan estrechamente con otros elementos semánticos como <section>, <article>, <header>, <footer>, entre otros. Mientras los elementos principales estructuran el contenido central del documento, <aside> actúa como complemento contextual, enriqueciendo la experiencia del usuario sin alterar la narrativa principal.
Por ejemplo, en una página sobre hidrotermalismo:
- <aside>: Puede contener notas técnicas adicionales sobre propiedades químicas del agua hidrotermal o enlaces a artículos relacionados.
- <figure>: Puede envolver una fotografía de un manantial hidrotermal junto con su leyenda descriptiva.
El uso correcto de estas etiquetas también tiene implicaciones en el diseño responsive y accesible, ya que permiten definir áreas específicas para estilos CSS diferenciados y facilitar la navegación mediante tecnologías asistivas.
Ejemplos Aplicados
Ejemplo 1: Uso básico de <aside> en un artículo técnico
<article>
<h2>Propiedades del agua hidrotermal</h2>
<p>El agua hidrotermal posee propiedades únicas debido a su origen geotérmico...</p>
<aside>
<p>© Nota: La temperatura puede variar según la profundidad.</p>
</aside>
<p>Estas propiedades influyen en su uso medicinal...</p>
</article>
En este ejemplo, el <aside> proporciona una nota adicional relacionada pero no esencial al flujo principal del artículo.
Ejemplo 2: Uso práctico de <figure> para ilustrar conceptos visuales
<section>
<h2>Formaciones hidrotermales</h2>
<figure>
<img src="manantial-hidrotermal.jpg" alt="Manantial hidrotermal">
<figcaption>Figura 1: Manantial hidrotermal activo en Islandia</figcaption>
</figure>
<p>La imagen muestra un ejemplo típico de formación hidrotermal...</p>
</section>
Aquí, el <figure>, junto con <figcaption>, estructura claramente una ilustración acompañada por su descripción contextualizada.
Ejemplo 3: Caso complejo integrando ambos elementos
<article class="estudio-hidrotermal">
<header><h2>Estudio sobre depósitos hidrotermales</h2>></header>
<p>El análisis revela varias formaciones minerales...</p>
<aside class="nota">
<p class="importante">© Nota: Este estudio se basa en datos recopilados durante 2020.</p>
</aside>
<p class="descripcion">
La figura siguiente ilustra las diferentes zonas térmicas...
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;aacute;nálisis...
>>
<figure class="zona-termica">
<img src="zona-termica.jpg" alt="Zonas térmicas en depósito hidrotermal">
<figcaption>Figura 2: Distribución térmica en depósitos hidrotermales</figcaption>
</figure>
</article>
Este ejemplo combina información secundaria (<aside>) con ilustraciones estructuradas (<figure>) para ofrecer una visión completa y bien organizada del tema tratado.
Análisis y Consideraciones Especiales
El uso correcto de las etiquetas <aside> y <figure> requiere atención a ciertos aspectos críticos. En primer lugar, es fundamental distinguir claramente entre contenido principal y secundario para evitar confusiones semánticas. El empleo excesivo o inadecuado puede diluir el significado estructural del documento o generar redundancias que afecten la accesibilidad.
Un error común consiste en utilizar <complexo/>, como colocar imágenes sin leyendas apropiadas o insertar notas secundarias dentro del flujo principal sin marcarse correctamente. Para evitarlo, se recomienda seguir las buenas prácticas establecidas por las especificaciones HTML5: usar <elemento> solo cuando aporta valor semántico real y mantener coherencia en la estructura.
También es importante considerar aspectos relacionados con el diseño responsive: las imágenes dentro de <figure> deben ser adaptables mediante CSS para diferentes tamaños de pantalla. Asimismo, las áreas marcadas con < aside > pueden ser ocultadas o resaltadas según sea necesario para mejorar la experiencia del usuario.
Tendencias actuales apuntan hacia una mayor utilización de estos elementos para crear páginas web más accesibles e interpretables por tecnologías asistivas. Además, su integración con otras tecnologías (como ARIA) puede potenciar aún más su funcionalidad en entornos complejos.
Síntesis y Conceptos Clave
A modo de resumen ejecutivo, las etiquetas < aside > y < figure > representan componentes fundamentales en la construcción de páginas web semánticas. Mientras que < aside > se emplea para contenidos secundarios relacionados con el tema principal —como notas o enlaces relacionados—,
el elemento < figure > sirve para agrupar contenidos visuales junto con sus descripciones (leyendas). Ambos contribuyen a mejorar la estructura lógica del documento, facilitando su interpretación por parte de usuarios y motores de búsqueda.
- < aside >: Contenido adicional o secundario relacionado con el contenido principal.
- < figure >: Contenedor para imágenes u otros contenidos multimedia acompañados por una leyenda (
< figcaption >). - Pueden combinarse eficazmente para ofrecer presentaciones enriquecidas y bien estructuradas.
- Sus usos adecuados mejoran accesibilidad, SEO y mantenimiento del código.
- Sigue siempre las recomendaciones establecidas por las especificaciones HTML5 para garantizar compatibilidad y semántica correcta.
Cabe destacar que estos elementos forman parte integral del enfoque moderno hacia el desarrollo web semántico, promoviendo páginas más comprensibles tanto para humanos como para máquinas. En futuros apartados se profundizará en cómo integrarlos con otras tecnologías web para potenciar aún más sus beneficios.