La etiqueta HTML <aside> se utiliza para crear el elemento ‘aside’ (contenido aparte). Este elemento representa contenido relacionado con el contenido circundante dentro de un artículo o página web, pero aún podría ser independiente por sí mismo.

Por ejemplo, el elemento <aside> se podría utilizar para presentar una “cita destacada” del artículo principal. También se podría utilizar para presentar información relevante para el artículo principal, como datos interesantes, etc.

La etiqueta <aside> se introdujo en HTML 5.

Sintaxis

La etiqueta <aside> se escribe como <aside></aside> con el contenido del aside insertado entre las etiquetas de inicio y fin.

Así:

HTML
<aside>
    Aquí va el contenido...
</aside>

Nota

Aunque <aside> no tiene atributos locales, puedes usar cualquiera de los atributos globales y/o atributos de contenido de eventos (ver plantilla al final).

Ejemplos

Uso básico de la etiqueta

Puedes colocar contenido en flujo (es decir, la mayoría de los elementos permitidos en el cuerpo de un documento) dentro de un elemento <aside> (con la excepción del elemento <main>). El siguiente ejemplo utiliza los elementos <h1> y <p> dentro de <aside>.

En este ejemplo, se asume que el aside se utiliza en el contexto de un artículo que trata sobre el planeta Marte (pero también podría ser un artículo sobre planetas en general o incluso un artículo sobre la medición de cosas grandes, etc.). El aside ofrece algunos datos básicos sobre el tamaño, la masa, etc. de Marte.

See the Pen Ejemplo Aside HTML by Alex (@htmldesdecero) on CodePen.

Cita destacada de un artículo

Aquí utilizamos el elemento <aside> para presentar una cita destacada del artículo principal.

See the Pen Ejemplo de Cita con <aside> by Alex (@htmldesdecero) on CodePen.

Ejemplo general

Este ejemplo representa una página web que se centra en enseñar HTML. El elemento se utiliza para proporcionar recursos adicionales relacionados con HTML, como enlaces a la documentación, tutoriales y guías.

See the Pen Ejemplo Web Aside HTML by Alex (@htmldesdecero) on CodePen.

Atributos

Se pueden agregar atributos a un elemento HTML para proporcionar más información sobre cómo debe aparecer o comportarse el elemento.

El elemento <aside> acepta los siguientes atributos.

AtributoDescripción
Ninguno 

Atributos globales

Los siguientes atributos son estándar en todos los elementos HTML. Por lo tanto, puedes usar estos atributos con la etiqueta <aside>, así como con todas las demás etiquetas HTML.

  • accesskey
  • autocapitalize
  • class
  • contenteditable
  • data-*
  • dir
  • draggable
  • hidden
  • id
  • inputmode
  • is
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • part
  • slot
  • spellcheck
  • style
  • tabindex
  • title
  • translate

Para obtener una explicación completa de estos atributos, consulta los atributos globales de HTML5.

5/5 - (1 voto)