Tag HTML <aside>
A tag HTML <aside> define conteúdo tangencial, como uma barra lateral ou nota, e cria um landmark ARIA complementary para acessibilidade.
A tag <aside> é um dos elementos HTML5 usados para definir uma seção que contém conteúdo tangencialmente relacionado ao conteúdo principal. Em geral, é utilizada para enriquecer um artigo com informações adicionais ou para destacar partes que podem ser interessantes para o utilizador. O conteúdo dentro do aside é uma parte independente e não essencial da página web; se for removido, o conteúdo principal não será afetado.
Notas de rodapé, comentários, listas de termos, informações de referência, coleções de links, citações destacadas, entre outros, são exemplos de informações que podem estar dentro do elemento <aside>.
Não confunda o elemento <aside> com uma barra lateral. A barra lateral é apenas um elemento visual, e a tag <aside> não tem necessariamente a aparência de uma barra lateral.
Não utilize o elemento <aside> para texto parentético, pois ele é destinado a conteúdo tangencial, e não a texto embutido ou complementar dentro do fluxo principal.
Você pode usar este elemento para efeitos tipográficos em conteúdo separado do conteúdo principal da página. Por exemplo, pode ser usado para bibliografias, citações destacadas, comentários com informações adicionais e assim por diante.
Por que usar <aside>? Acessibilidade e SEO
O verdadeiro motivo para escolher <aside> em vez de um contêiner genérico é a semântica. Um <aside> em nível de página (colocado fora de qualquer <article> ou <section>) é mapeado para o papel de landmark ARIA complementary. Isso tem efeitos concretos:
- Leitores de tela expõem-no como um landmark. Utilizadores de tecnologia assistiva podem listar e saltar diretamente para regiões "complementary", assim como fazem com
<nav>e<main>. Um<div>genérico não oferece esse landmark. - Clarifica o esboço do documento. Motores de busca e ferramentas de acessibilidade constroem um mapa estrutural da página; o
<aside>informa que este bloco é conteúdo de suporte, não primário. - Sinaliza a intenção a outros programadores. A própria marcação documenta que o conteúdo é tangencial e removível.
Um <aside> sempre carrega o papel ARIA implícito complementary. Porém, quando está aninhado dentro de um <article> (ou <section>), é delimitado a esse conteúdo, e os leitores de tela normalmente não o apresentam como um landmark de nível de página — ele é lido como relacionado ao artigo, e não à página como um todo.
Se uma página tiver mais de um <aside>, atribua a cada um um nome acessível distinto com aria-label ou aria-labelledby, para que os utilizadores de leitor de tela consigam distinguir os landmarks:
<aside aria-label="Author bio">…</aside>
<aside aria-labelledby="related-heading">
<h2 id="related-heading">Related articles</h2>
…
</aside>Sintaxe
A tag <aside> vem em pares. O conteúdo é escrito entre as tags de abertura (<aside>) e fechamento (</aside>).
Exemplo da tag HTML <aside>:
Tag HTML <aside>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<main>
<p>I like watching Game of Thrones.</p>
</main>
<aside>
<h4>Game of Thrones</h4>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels</p>
</aside>
</body>
</html>Resultado
<aside> aninhado dentro de um <article>
Aqui o <aside> está dentro do <article>. O conteúdo principal vem primeiro, e o aside segue como uma nota "Você sabia?" que é claramente tangencial a esse artigo específico. Por estar aninhado, navegadores e leitores de tela o tratam como relacionado ao artigo, e não como um landmark de nível de página.
Exemplo da tag HTML <aside> com a tag <article>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the aside tag</h1>
<article>
<h2>Game of Thrones</h2>
<p>Game of Thrones is an American fantasy drama television series created by David Benioff and D. B. Weiss. It is an adaptation of A Song of Ice and Fire, George R. R. Martin's series of fantasy novels.</p>
<aside>
<h3>Did you know?</h3>
<p>The series ran for eight seasons and won numerous Emmy Awards, becoming one of the most-watched shows in television history.</p>
</aside>
</article>
</body>
</html><aside> como barra lateral de nível de página vs. <aside> dentro de um artigo
O posicionamento do <aside> altera o seu significado. Um <aside> colocado fora de qualquer <article> ou <section> é um aside de nível de página — tipicamente uma barra lateral com links, anúncios ou posts relacionados que suporta a página inteira. Um <aside> colocado dentro de um <article> suporta apenas esse artigo.
<body>
<main>
<article>
<h2>How to brew pour-over coffee</h2>
<p>Heat the water to about 94°C, then pour slowly in circles…</p>
<!-- In-article aside: tangential to THIS article -->
<aside>
<h3>Tip</h3>
<p>A gooseneck kettle makes the pour much easier to control.</p>
</aside>
</article>
</main>
<!-- Page-level aside: a sidebar supporting the whole page -->
<aside aria-label="Related guides">
<h2>More guides</h2>
<ul>
<li><a href="/french-press">French press</a></li>
<li><a href="/cold-brew">Cold brew</a></li>
</ul>
</aside>
</body>Você pode usar mais de um <aside> em uma página, e eles podem estar aninhados em diferentes níveis. Atribua a cada aside de nível de página um aria-label ou aria-labelledby para que seu landmark tenha um nome único.
A diferença entre as tags <aside> e <div>
O elemento <div> é um contêiner genérico sem significado semântico — para a tecnologia assistiva, ele é invisível estruturalmente, não expondo nada além do texto em seu interior. Um <aside> de nível de página, por outro lado, expõe um landmark complementary para o qual utilizadores de leitor de tela podem navegar diretamente. Essa diferença afeta a acessibilidade e o SEO.
Compare as duas abordagens para marcar uma barra lateral:
<!-- Before: no semantics, just a styled box -->
<div class="sidebar">
<h2>Related links</h2>
<ul>…</ul>
</div>
<!-- After: a navigable complementary landmark -->
<aside aria-label="Related links">
<h2>Related links</h2>
<ul>…</ul>
</aside>Quando ainda usar <div>? Use <div> quando o contêiner existir puramente para estilização ou layout (uma célula de grade, um invólucro flex, a casca de um cartão) e não tiver significado independente ou tangencial. Se o bloco for conteúdo de suporte — mas removível —, prefira <aside>; se for apenas um gancho para CSS, <div> é a escolha correta.
Atributos
A tag <aside> suporta os Atributos Globais e os Atributos de Evento.
Exemplo com um atributo global:
<aside class="sidebar-note" id="extra-info">
<p>Additional context goes here.</p>
</aside>Como estilizar uma tag HTML <aside>
O elemento <aside> não possui estilização visual padrão, portanto você normalmente adiciona a sua própria. As cores abaixo são ilustrativas — use os tokens de design do seu projeto ou valores com nomes em código de produção, em vez de literais hexadecimais:
aside {
background-color: whitesmoke;
border-left: 4px solid lightgray;
padding: 10px;
}Suporte de navegadores e histórico
O elemento <aside> foi introduzido no HTML5 e é suportado por todos os navegadores modernos. Antes do HTML5, os programadores marcavam o mesmo conteúdo com um contêiner genérico como <div id="sidebar">, que não transmitia nenhum significado para navegadores, motores de busca ou tecnologia assistiva. O elemento semântico <aside> substitui esse padrão.
Elementos relacionados
<article>— conteúdo autossuficiente que um<aside>frequentemente suporta.<main>— o conteúdo dominante do documento.<section>— um agrupamento temático de conteúdo.<nav>— outro elemento landmark, para links de navegação.