0Pricing
HTML Academy · Aula

aside: conteúdo complementar

Use aside para barras laterais e conteúdo relacionado de forma indireta.

aside: conteúdo complementar é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de HTML Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de HTML Academy inclui 4 aulas no total.

O elemento aside

O elemento <aside> marca conteúdo relacionado apenas de forma indireta ao conteúdo ao redor:

  • Ele pode ser separado do conteúdo principal sem que o significado do conteúdo principal seja perdido
  • Pense em: barras laterais, caixas de destaque, citações destacadas e publicidade

aside em um article

Dentro de um article, aside indica informações relacionadas, mas não essenciais à narrativa:

<article>
  <h2>How the Internet Works</h2>
  <p>The Internet is a global network of computers...</p>

  <aside>
    <h3>Did You Know?</h3>
    <p>The first email was sent in 1971 by Ray Tomlinson.</p>
  </aside>

  <p>Data travels in packets across routers...</p>
</article>

aside no nível da página

No nível da página, aside é usado para barras laterais:

<div class="layout">
  <main>
    <article>...</article>
  </main>

  <aside>
    <h2>Related Articles</h2>
    <ul>...</ul>

    <h2>Newsletter</h2>
    <p>Subscribe for updates.</p>
  </aside>
</div>

Função ARIA de aside

Um <aside> no nível da página corresponde a role="complementary":

<aside aria-label="Related resources">
  <h2>Related resources</h2>
  ...
</aside>
<!-- Multiple asides should be uniquely labeled
     Screen reader users can jump directly to complementary regions -->

Citações destacadas com aside

Citações destacadas (trechos de citações usados para causar impacto visual) podem ser marcadas como aside:

<aside class="pullquote">
  <blockquote>
    <p>HTML is the foundation of the web — learn it well.</p>
  </blockquote>
</aside>

Publicidade com aside

Unidades de publicidade nas barras laterais podem ser marcadas como aside:

<aside aria-label="Advertisement">
  <p class="sr-only">Advertisement</p>
  <img src="ad.jpg" alt="Learn JavaScript online — 50% off">
</aside>

aside versus section

Distinção principal:

  • <aside> — relacionado apenas de forma indireta ao conteúdo principal; suplementar
  • <section> — faz parte tematicamente do conteúdo principal

aside para termos do glossário

Use aside para definir termos usados em um article:

<article>
  <p>The DOM (Document Object Model) is updated when...</p>

  <aside id="dom-def">
    <dl>
      <dt>DOM</dt>
      <dd>Document Object Model — the browser's tree representation of an HTML page.</dd>
    </dl>
  </aside>
</article>

Várias seções na barra lateral

Um aside da barra lateral pode conter várias sections independentes:

<aside aria-label="Sidebar">
  <section>
    <h2>About the Author</h2>
    <p>Jane Smith is a senior web developer...</p>
  </section>
  <section>
    <h2>Popular Posts</h2>
    <ul>...</ul>
  </section>
</aside>

aside não precisa de título

Ao contrário de section, aside não exige estritamente um título:

<!-- Valid aside without heading: -->
<aside>
  <img src="banner.jpg" alt="20% off this week only">
</aside>
<!-- But adding a heading (even visually hidden) improves accessibility -->
<aside>
  <h2 class="sr-only">Promotions</h2>
  <img src="banner.jpg" alt="20% off this week only">
</aside>

aside não serve apenas para estilização

Aside é semântico — não o use apenas para criar visualmente o layout de uma barra lateral:

<!-- BAD: aside used for layout only -->
<aside class="right-column">  <!-- no semantic relationship to main content -->
  <div class="ad">...</div>
</aside>

<!-- GOOD: aside for related content -->
<main><!-- article content --></main>
<aside><!-- genuinely related supplementary info --></aside>

Verificação rápida

A qual função de ponto de referência ARIA corresponde um aside no nível da página?

Resumo: aside

Fundamentos de aside:

  • Conteúdo relacionado apenas de forma indireta ao conteúdo ao redor
  • Barra lateral no nível da página → ponto de referência complementar
  • Dentro de um article → informações suplementares (definições de termos, destaques)
  • Identifique vários asides com aria-label
  • Não serve para contêineres de layout puro — use div para isso

Perguntas Frequentes

A aula “aside: conteúdo complementar” é grátis?

Sim — o texto completo de “aside: conteúdo complementar” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de HTML Academy, atualize para CoddyKit PRO. O curso de HTML Academy inclui 4 aulas no total.

O que vou aprender em “aside: conteúdo complementar”?

Use aside para barras laterais e conteúdo relacionado de forma indireta. Você pratica HTML Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar HTML Academy?

Nenhuma experiência prévia é necessária. HTML Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “aside: conteúdo complementar”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de HTML Academy?

Sim. Cada aula de HTML Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. aside: conteúdo complementar
  2. figure e figcaption: uma revisão
  3. details e summary: componente de divulgação
  4. Os elementos progress e meter
← Voltar para HTML Academy