0Pricing
HTML Academy · Aula

figure e figcaption: uma revisão

Aplique figure a outros conteúdos além de imagens, como código, gráficos e citações.

figure e figcaption: uma revisão é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 2 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.

figure além de imagens

O elemento <figure> não serve apenas para imagens — ele marca qualquer conteúdo autocontido referenciado no texto principal:

  • Exemplos de código
  • Equações matemáticas
  • Gráficos e diagramas
  • Citações
  • Áudio e vídeo com legendas

Listagem de código em figure

Identifique exemplos de código como figures:

<figure id="code-1">
  <figcaption>Listing 1: A simple JavaScript greeting function.</figcaption>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>
</figure>

<p>As shown in <a href="#code-1">Listing 1</a>, the function...</p>

Áudio em figure

Áudio com uma legenda descritiva:

<figure>
  <audio controls src="podcast-episode-42.mp3">
    Your browser does not support audio.
  </audio>
  <figcaption>Episode 42: HTML5 Deep Dive — 48 minutes.</figcaption>
</figure>

Vídeo em figure

Vídeo com uma legenda que descreve seu conteúdo:

<figure>
  <video controls width="800" height="450">
    <source src="tutorial.mp4" type="video/mp4">
    <source src="tutorial.webm" type="video/webm">
  </video>
  <figcaption>Tutorial: Building a responsive navigation menu in 10 minutes.</figcaption>
</figure>

Gráfico em figure

Uma imagem de gráfico com a fonte dos dados como legenda:

<figure>
  <img
    src="revenue-chart.png"
    alt="Line chart showing revenue growth from $2M in 2020 to $8M in 2024"
    width="800"
    height="400"
  >
  <figcaption>
    Figure 3: Annual revenue growth 2020-2024.
    Source: Finance Department Annual Report.
  </figcaption>
</figure>

Diagrama SVG em figure

Um diagrama SVG com uma legenda:

<figure>
  <svg role="img" aria-labelledby="diagram-title" width="400" height="300">
    <title id="diagram-title">Three-tier architecture diagram</title>
    <!-- SVG content -->
  </svg>
  <figcaption>Figure 4: Client-server-database three-tier architecture.</figcaption>
</figure>

Citação em figure

Citação extensa como figure:

<figure>
  <blockquote cite="https://www.w3.org/TR/html52/">
    <p>The main element represents the main content of the body of a document
       or application.</p>
  </blockquote>
  <figcaption>— W3C HTML5.2 Specification</figcaption>
</figure>

alt versus figcaption: uma revisão

Esclarecendo novamente a distinção:

  • alt — invisível; substitui a imagem para leitores de tela; descreve o que a imagem mostra
  • figcaption — visível; fornece contexto, autoria ou numeração; descreve o que a figure significa
<figure>
  <img src="volcano.jpg" alt="Ash plume rising 2km above Mount St. Helens">
  <figcaption>Figure 7: The 1980 eruption. Source: USGS.</figcaption>
</figure>

Posicionamento de figcaption

figcaption pode ser o primeiro ou o último filho de figure:

<!-- Caption above the content (common for code listings) -->
<figure>
  <figcaption>Listing 1: Hello World</figcaption>
  <pre>...</pre>
</figure>

<!-- Caption below the content (common for images) -->
<figure>
  <img src="photo.jpg" alt="...">
  <figcaption>Caption below the image</figcaption>
</figure>

Numeração de figures com contadores CSS

Numere figures automaticamente com contadores CSS:

/* In CSS: */
main {
  counter-reset: figure-counter;
}
figure {
  counter-increment: figure-counter;
}
figcaption::before {
  content: 'Figure ' counter(figure-counter) ': ';
  font-weight: bold;
}

Quando não usar figure

Não envolva todas as imagens em figure:

  • Imagens decorativas (alt vazio) → use apenas <img alt="">
  • Imagens puramente apresentacionais → background-image em CSS
  • Fotos de avatares em uma lista de usuários → use apenas <img>
  • Logotipo no cabeçalho → use apenas <img>

Verificação rápida

Qual filho de figure fornece uma legenda visível exibida para todos os usuários?

Resumo: figure revisitado

Fundamentos de figure, revisados:

  • <figure> — conteúdo autocontido referenciado (imagens, código, gráficos, áudio e citações)
  • <figcaption> — legenda visível, primeiro ou último filho
  • Texto alt = descrição invisível; figcaption = contexto visível
  • Numere automaticamente com contadores CSS
  • Nem toda imagem precisa de um figure

Perguntas Frequentes

A aula “figure e figcaption: uma revisão” é grátis?

Sim — o texto completo de “figure e figcaption: uma revisão” é 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 “figure e figcaption: uma revisão”?

Aplique figure a outros conteúdos além de imagens, como código, gráficos e citações. 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 2 de 4.

Quanto tempo leva a aula “figure e figcaption: uma revisão”?

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