Etiqueta HTML <aside>

Definição e Uso

<aside> O tag define algum conteúdo além do conteúdo do próprio elemento.

O conteúdo do aside deve estar indiretamente relacionado ao conteúdo ao redor.

Dica:<aside> O conteúdo geralmente é colocado como barra lateral no documento.

Atenção:<aside> O elemento não é apresentado com estilos especiais no navegador. No entanto, você pode usar CSS para definir <aside> Estilos do elemento (veja os exemplos abaixo).

Veja também:

Manual de Referência do DOM HTML:Objeto Aside

Exemplo

Exemplo 1

Exibir conteúdo além do conteúdo do próprio elemento:

<p>Este verão, minha família e eu visitamos o Ocean Park Shanghai Haichang. O tempo estava bom, o parque marinho era muito encantador! Minha família e eu passamos um verão maravilhoso!</p>
<aside>
<h4>Parque Marinho Shanghai Haichang</h4>
<p>O Ocean Park Shanghai Haichang é um parque temático localizado no distrito de Pudong, com uma área total de cerca de 29,7 hectares, focando na cultura marinha, e também é um parque turístico de nível AAAA do país.</p>
</aside>

Experimente você mesmo

Exemplo 2

Definir estilos do elemento <aside> usando 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 lateral</h1>
<p>Este verão, minha família e eu visitamos o Ocean Park Shanghai Haichang. O tempo estava bom, o parque marinho era muito encantador! Minha família e eu passamos um verão maravilhoso!</p>
<aside>
<p>O Ocean Park Shanghai Haichang é um parque temático localizado no distrito de Pudong, com uma área total de cerca de 29,7 hectares, focando na cultura marinha, e também é um parque turístico de nível AAAA do país.</p>
</aside>
<p>Este verão, minha família e eu visitamos o Ocean Park Shanghai Haichang. O tempo estava bom, o parque marinho era muito encantador! Minha família e eu passamos um verão maravilhoso!</p>
<p>Este verão, minha família e eu visitamos o Ocean Park Shanghai Haichang. O tempo estava bom, o parque marinho era muito encantador! Minha família e eu passamos um verão maravilhoso!</p>
</body>
</html>

Experimente você mesmo

Atributos globais

<aside> A tag também suporta Atributos globais no HTML.

Atributos de evento

<aside> A tag também suporta Atributos de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <aside> Elemento:

aside {
  display: block;
}

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

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