<aside>: Elemento ASIDE
Última atualização: 2026-10-13
<aside>Elemento ASIDE
Representa conteúdo tangencialmente relacionado ao conteúdo principal, como uma barra lateral, nota, citação ou anúncio.
| Categoria | Semântico |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </aside> tag |
| Status | Padrão |
📝 Sintaxe
<aside>conteúdo lateral</aside>▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <aside> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica： aside não precisa estar visualmente ao lado; o essencial é a relação tangencial semântica.
❓ Perguntas Frequentes
QQual é a diferença entre aside e div?
A
<aside> tem semântica clara: «parte tangencialmente relacionada ao conteúdo principal» (barra lateral, espaço de anúncio, glossário, recomendações); <div> não tem semântica alguma. Critério: removendo este trecho, o conteúdo principal continua completo? Se sim, aside é adequado.Qaside deve ficar dentro ou fora de article?
AAmbos válidos, com significados diferentes: dentro de
<article> é um complemento «daquele artigo» (citações no corpo, explicação de termos); fora, é um complemento «da página como um todo» (barra lateral do site). A posição segue a qual o conteúdo pertence.Qaside é adequada para navegação?
ANavegação lateral de nível de site cabe melhor em
<nav>. <aside> é adequada para conteúdo não-navegacional fracamente relacionado ao principal: sumário, nuvem de tags, leituras recomendadas — são «complementos», não «navegação».🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.
📚 Tutoriais Relacionados
