fbpx

HTML aside

El elemento <aside> podemos verlo como la representación de una sección, en la cual hay información que está relacionada indirectamente con el contenido principal descrito en el documento.

Las podemos encontrar usualmente como barras laterales colocadas al margen, en las cuales se coloca alguna explicación, información, biografía, glosario o algún otro elemento que, de manera indirecta, está relacionada con el contenido.

Descripción

¿Cómo se diferencia este elemento? Está relacionado solo levemente al contenido principal, pero no es indispensable para comprenderlo, podríamos verlo como un adicional de información con respecto al contenido que se está navegando.

Seguramente lo has encontrado muchas veces englobando contenidos como notas, pensamientos, enlaces e incluso tweets.

De una manera impresa también lo hemos visto muchas veces, en los márgenes de revistas, diarios, donde se aporta información adicional, pero no de manera crítica, sino con la intención de mejorar la experiencia del lector.

No deben utilizarse estas etiquetas para colocar contenido que no guarde relación con el contexto de la sección.

Ejemplos

¿Cómo se ve un elemento <aside>? En el siguiente ejemplo te mostraremos una entrada de blog presentada como un <article>, en el cual esta insertado un <aside> que, como hemos dicho anteriormente, estará relacionado con el contenido de dicha entrada y no debe verse como un todo.

<h1>El blog de maquillaje de Mary</h1>
<p>Veamos algunas de mis entradas más recientes...</p>
<article>
  <header>
    <h1>Uso de Vitamina C en el rostro</h1>
    <p>Publicado <time pubdate datetime="2019-05-20T18:00-04:00">la semana pasada</time></p>
  </header>
  <p>Últimamente se ha demostrado que el ácido ascórbico puede hacer maravillas en nuestro rostro, ayuda activamente en la producción de colágeno y es perfecto para usar en forma de serum justo antes de un buen protector solar. </p>
  <p>...</p>
  <aside>
    <p>Es importante que utilices la vitamina C con un grado de concentración adecuado para la sensibilidad de tu piel, así evitarás daños...</p>
  </aside>
</article>

Atributos

Los atributos del elemento <aside> son los mismos que han sido definidos de manera estándar para todos los elementos, es decir, los atributos globales.

Los cuales definen el lenguaje usado, la dirección del texto, la relación que puede tener esta etiqueta con otros elementos, entre otros.



Share This