Tag HTML <aside>

Neste post, falaremos sobre Tag Aside . Aspirando para atender às demandas de aprendizagem.

A tag HTML <aside> é usada para definir conteúdo tangencialmente relacionado ao conteúdo principal em uma página da web. A tag <aside> normalmente é usada para conteúdo como barras laterais, chamadas ou conteúdo relacionado que não é o foco principal da página.

Usos da tag HTML <aside>

Aqui estão alguns casos de uso comuns para a tag <aside>:

  • A tag <aside> pode ser usada para definir uma barra lateral que contém conteúdo secundário, como uma lista de postagens recentes, anúncios ou conteúdo relacionado.
  • A tag <aside> pode ser usada para definir uma caixa de texto explicativo que contém informações adicionais relacionadas ao conteúdo principal da página, como uma definição, uma citação ou uma notícia relacionada.
  • A tag <aside> pode ser usada para definir uma seção de conteúdo relacionado, como links para outros artigos, produtos ou serviços que possam ser de interesse do leitor.
  • A tag <aside> pode ser usada para definir um anúncio que não seja o foco principal da página.
  • A tag <aside> pode ser usada para definir uma biografia de autor que contém informações sobre o autor do conteúdo da página.

Inclua algum conteúdo adicional além daqueles colocados em Tag Aside:

Example: 

1
1234567891011<!DOCTYPE html><html><body><p>My friends and I visited Yellowstone National Park this summer. The weather was nice, and Yellowstone was amazing! I had a great summer together with my friends!</p><aside><h4>Yellowstone National Park</h4><p>In the west of the country, Yellowstone National Park is one of the most well-known national parks, Wildlife and geothermal features are among the park's many attractions</p></aside></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Os elementos de tag <aside> podem ser estilizados com CSS da seguinte forma:

Example

1
123456789101112131415161718<!DOCTYPE html><html><head><style>aside {width: 33%; padding-left: 12px;margin-left: 12px;float: right;font-style: italic;background-color: lightblue;}</style></head><body><h1>The aside element</h1><aside><p>In the west of the country, Yellowstone National Park is one of the most well-known national parks, Wildlife and geothermal features are among the park's many attractions</p></aside><p>My friends and I visited Yellowstone National Park this summer. The weather was nice, and Yellowstone was amazing! I had a great summer together with my friends!</p><p>My friends and I visited Yellowstone National Park this summer. The weather was nice, and Yellowstone was amazing! I had a great summer together with my friends!</p></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo de tag de lado com a tag de artigo:

Example: 

1
123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html><head><style>aside {background-color: yellow;padding: 10px;margin-top: 20px;border-radius: 5px;}aside h3 {margin-bottom: 10px;}aside li {list-style-type: none;margin-bottom: 5px;}</style></head><body><article><h2>Google unveils new AI-powered Smart Home Platform</h2><p>Google has announced the release of their new smart home platform, powered by artificial intelligence. The platform allows users to control all their smart home devices through a single app and it also features voice control with Google Assistant.</p><p>The platform is compatible with a wide range of smart home devices, including lights, thermostats, and security systems.</p><aside><h3>Other Tech News</h3><ul><li>Tesla Autopilot gets major update</li><li>5G rollout accelerates in major cities</li><li>AI shows promise in medical research</li></ul></aside></article></body></html>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX


Usos e Definição

Tag Aside <aside> indica algum conteúdo separado do conteúdo ao qual pertence.

O conteúdo, em aparte, deve estar indiretamente relacionado ao conteúdo dos parágrafos anteriores .

Conselho: o conteúdo <aside> normalmente faz parte de uma barra lateral em um documento.

IMPORTANTE : O elemento <aside> não é exibido de forma diferente dos outros elementos. Como alternativa, você pode estilizar elementos <aside> usando CSS.


Atributos Globais

Em HTML, a Tag <article> também aceita Atributos Globais .


Atributos do Evento

Em HTML, a Tag <article> também aceita Atributos de Evento .


Compatibilidade do navegador

Na tabela a seguir, os números indicam a versão do navegador compatível com o elemento no Tag Aside.

Elemento
<à parte> 6.0 9,0 4.0 5,0 11.1

Configurações de CSS por padrão

A maioria dos navegadores exibe o elemento <aside> utilizando os valores padrão para Tag Aside :

aside {
display: block;
}


Tag HTML <aside>

Aqui estão alguns dos benefícios de usar a tag <aside> :

  • Usar a tag <aside> para definir o conteúdo relacionado, mas não essencial ao conteúdo principal, pode tornar mais fácil para as pessoas que usam leitores de tela ou outras tecnologias assistivas entenderem o conteúdo e o contexto da página.
  • Ao separar o conteúdo relacionado tangencialmente do conteúdo principal da página usando a tag <aside> , o conteúdo principal se torna mais focado e fácil de ler.
  • A tag <aside> pode ser usada para incluir conteúdo ou recursos adicionais na página, como feeds de mídia social, anúncios ou links para conteúdo relacionado, sem desviar a atenção do conteúdo principal.
  • Ao usar a tag <aside> para agrupar o conteúdo secundário, os mecanismos de pesquisa podem entender melhor a estrutura e a hierarquia do conteúdo da página, o que pode melhorar a visibilidade e a classificação da página nos resultados da pesquisa.
  • O uso da tag <aside> pode ajudar a organizar o conteúdo de uma página da Web, facilitando a navegação e a compreensão.
Deixe sua reação abaixo para apreciar nossos esforços ou sugerir alguns esforços para a melhoria deste site.
Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone