Etiqueta HTML <aside>

Definición y uso

<aside> La etiqueta define contenido que está fuera del contenido al que pertenece.

El contenido de <aside> debe estar indirectamente relacionado con el contenido circundante.

Consejo:<aside> El contenido generalmente se coloca como barra lateral en el documento.

Nota:<aside> El elemento no se presenta con un estilo especial en el navegador. Sin embargo, puede usar CSS para configurar <aside> Estilos del elemento (véase los ejemplos a continuación).

Por favor, consulte también:

Manual de Referencia HTML DOM:Objeto Aside

Ejemplo

Ejemplo 1

Mostrar contenido además del contenido al que pertenece:

<p>Este verano, mi familia y yo visitamos el Parque Acuático Shanghai Haichang. El clima estaba muy bueno, el parque acuático era muy mágico. Mi familia y yo pasamos un verano maravilloso!</p>
<aside>
<h4>Parque Acuático Shanghai Haichang</h4>
<p>El Parque Acuático Shanghai Haichang es un parque temático ubicado en el distrito de Pudong, que se centra en la cultura marina, con una superficie total de aproximadamente 29.7 hectáreas y también es un景区 AAAA del país.</p>
</aside>

Prueba personalmente

Ejemplo 2

Configurar estilos del elemento <aside> utilizando CSS:

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>
<h1>elemento <aside></h1>
<p>Este verano, mi familia y yo visitamos el Parque Acuático Shanghai Haichang. El clima estaba muy bueno, el parque acuático era muy mágico. Mi familia y yo pasamos un verano maravilloso!</p>
<aside>
<p>El Parque Acuático Shanghai Haichang es un parque temático ubicado en el distrito de Pudong, que se centra en la cultura marina, con una superficie total de aproximadamente 29.7 hectáreas y también es un景区 AAAA del país.</p>
</aside>
<p>Este verano, mi familia y yo visitamos el Parque Acuático Shanghai Haichang. El clima estaba muy bueno, el parque acuático era muy mágico. Mi familia y yo pasamos un verano maravilloso!</p>
<p>Este verano, mi familia y yo visitamos el Parque Acuático Shanghai Haichang. El clima estaba muy bueno, el parque acuático era muy mágico. Mi familia y yo pasamos un verano maravilloso!</p>
</body>
</html>

Prueba personalmente

Atributos globales

<aside> La etiqueta también admite Atributos globales en HTML.

Atributos de eventos

<aside> La etiqueta también admite Atributos de eventos en HTML.

Configuración CSS predeterminada

La mayoría de los navegadores mostrarán los siguientes valores predeterminados <aside> Elemento:

aside {
  display: block;
}

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que primero admitió este elemento.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1