Aula 36 - Elemento Aside HTML

Introdução

O elemento <aside> é uma tag semântica do HTML5 utilizada para representar conteúdos complementares ou relacionados ao conteúdo principal da página.

Normalmente aparece como uma barra lateral, área de informações extras, anúncios, links relacionados ou conteúdos adicionais.

📌 O conteúdo do aside não é essencial para entender o conteúdo principal, mas adiciona informações complementares.

O que é o Elemento Aside?

A tag <aside> representa uma área secundária relacionada ao conteúdo principal.



<aside>


Conteúdo complementar


</aside>

Onde o Aside é utilizado?

Uso	Exemplo
Blog	Lista de posts recentes.
Sites de notícias	Notícias relacionadas.
E-commerce	Produtos recomendados.
Sites institucionais	Informações extras.

Estrutura Básica



<aside>



<h3>

Links Relacionados

</h3>



<ul>

<li>HTML</li>

<li>CSS</li>

</ul>



</aside>

Aside dentro do Layout

O aside normalmente aparece ao lado do conteúdo principal utilizando CSS para criar layouts.



<main>



<article>



Conteúdo principal



</article>





<aside>



Conteúdo lateral



</aside>



</main>

Exemplo com Blog



<article>



<h1>

Aprendendo HTML

</h1>



<p>

Conteúdo do artigo.

</p>



</article>





<aside>



<h2>

Mais lidos

</h2>



<ul>



<li>

CSS

</li>



<li>

JavaScript

</li>



</ul>



</aside>

Aside x Section

Aside	Section
Conteúdo complementar.	Conteúdo principal organizado por tema.
Pode ser removido sem prejudicar o conteúdo.	Faz parte da estrutura principal.

Aside x Div

Div	Aside
Apenas agrupamento visual.	Possui significado semântico.
Não informa função do conteúdo.	Indica informação complementar.

Exemplo de Barra Lateral



<aside>



<h3>

Categorias

</h3>



<a href="#">

HTML

</a>



<a href="#">

CSS

</a>



<a href="#">

JavaScript

</a>



</aside>

Uso com CSS

O elemento aside pode ser posicionado utilizando técnicas modernas de layout como Flexbox e Grid.



main {

display:flex;

gap:20px;

}



article {

flex:3;

}



aside {

flex:1;

}

SEO e Acessibilidade

O uso correto do aside ajuda navegadores, mecanismos de busca e leitores de tela a compreenderem a estrutura da página.

Melhora organização do conteúdo.
Facilita navegação.
Define informações secundárias.
Melhora a semântica HTML5.

Exemplo Completo HTML5



<body>



<header>

Cabeçalho

</header>



<main>



<article>

Conteúdo principal

</article>



<aside>

Informações extras

</aside>



</main>



<footer>

Rodapé

</footer>



</body>

Resumo da Aula

<aside> representa conteúdo complementar.
É um elemento semântico HTML5.
Pode ser usado como barra lateral.
Melhora organização e acessibilidade.
Trabalha junto com article e main.

📌 Elemento Aside no HTML