fbpx

HTML aside

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

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.

Comparte este artículo:

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn
Share on email
Email

Revisa estas publicaciones

HTML dd

HTML tiene muchos elementos muy útiles a la hora de crear una web. Con las diferentes etiquetas de HTML, puedes indicarle al navegador cómo quieres

VER PUBLICACIÓN COMPLETA

HTML Link

Descripción La etiqueta HTML <link> cuenta con un mecanismo de añadir al documento actual información externa, es decir, el elemento <link> permite a los autores

VER PUBLICACIÓN COMPLETA

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

VER PUBLICACIÓN COMPLETA

HTML abbr

Con la etiqueta HTML abbr se pueden hacer abreviaciones de una parte del texto dentro de un bloque. Es muy útil si se desea simplificar la escritura de

VER PUBLICACIÓN COMPLETA