0Pricing
HTML Academy · Aula

figure e figcaption

Envolver imagens em contentores figure semânticos com legendas.

figure e figcaption é uma aula grátis de HTML Academy no CoddyKit. Esta é a aula 4 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 que é figure?

O elemento <figure> marca conteúdo autocontido referenciado pelo texto principal:

  • Imagens com legendas
  • Listagens de código
  • Diagramas, gráficos e ilustrações
  • Citações

A característica principal: se for removido do fluxo principal, o texto ao redor ainda fará sentido.

figure with figcaption

<figcaption> fornece uma legenda para a figura:

<figure>
  <img src="chart.png" alt="Bar chart showing Q1-Q4 revenue">
  <figcaption>Figure 1: Quarterly revenue growth, 2024.</figcaption>
</figure>
<!-- figcaption can be first or last child of figure -->
<!-- It is visible text that supplements the alt text -->

Posição de figcaption

<figcaption> pode ser colocado antes ou depois do conteúdo principal:

<figure>
  <figcaption>Listing 1: Hello World in HTML</figcaption>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;body&gt;Hello, World!&lt;/body&gt;
&lt;/html&gt;</code></pre>
</figure>

Acessibilidade: alt versus figcaption

Entenda a diferença:

  • alt — descreve o conteúdo da imagem para leitores de tela e quando as imagens não são carregadas
  • figcaption — legenda visível que fornece contexto, fonte ou explicação

Eles têm finalidades diferentes e não devem duplicar um ao outro.

<figure>
  <img src="chart.png" alt="Line chart showing 45% growth from January to December">
  <figcaption>Source: 2024 Annual Report, Finance Department.</figcaption>
</figure>

Listagem de código em figure

Use <figure> para exemplos de código com rótulos:

<figure>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
  <figcaption>Example 1: A simple greeting function in JavaScript.</figcaption>
</figure>

Citação em figure

<figure> funciona muito bem com <blockquote>:

<figure>
  <blockquote>
    <p>The web is for everyone.</p>
  </blockquote>
  <figcaption>— Tim Berners-Lee, inventor of the World Wide Web</figcaption>
</figure>

Várias imagens em figure

Uma figura pode conter várias imagens relacionadas:

<figure>
  <img src="before.jpg" alt="Garden before renovation">
  <img src="after.jpg" alt="Garden after renovation">
  <figcaption>Before and after the 2024 renovation project.</figcaption>
</figure>

figure versus div

Quando usar <figure> em vez de <div>:

  • Use <figure> quando o conteúdo puder ser movido para um apêndice
  • Use <figure> quando precisar de uma legenda visível
  • Use <div> para contêineres de layout ou grupos de imagens que não sejam autocontidos

Vinculando figuras no texto

Faça referência às figuras no texto principal:

<p>The growth trend is illustrated in <a href="#fig1">Figure 1</a>.</p>

<figure id="fig1">
  <img src="growth.png" alt="Revenue growth chart 2020-2024">
  <figcaption>Figure 1: Annual revenue growth 2020-2024.</figcaption>
</figure>

figure não é obrigatório para imagens

Você não precisa envolver todas as imagens em <figure>:

<!-- Decorative or simple content image: just img -->
<img src="avatar.jpg" alt="Profile photo of Jane Doe" class="avatar">

<!-- Image with a caption OR self-contained reference: use figure -->
<figure>
  <img src="diagram.svg" alt="System architecture diagram">
  <figcaption>Figure 3: The three-tier architecture.</figcaption>
</figure>

Estilizando figure e figcaption

CSS comum para figuras:

figure {
  margin: 2rem auto;
  max-width: 100%;
  text-align: center;
}

figcaption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

Verificação rápida

Qual é a principal diferença entre o texto alt e figcaption?

Recapitulação: figure e figcaption

Fundamentos de figure:

  • <figure> — conteúdo autocontido referenciado no texto principal
  • <figcaption> — legenda visível, primeiro ou último filho de figure
  • alt — descrição invisível para leitores de tela
  • figcaption — contexto visível para todos os usuários
  • Funciona para imagens, código, citações e gráficos

Perguntas Frequentes

A aula “figure e figcaption” é grátis?

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

Envolver imagens em contentores figure semânticos com legendas. 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 4 de 4.

Quanto tempo leva a aula “figure e figcaption”?

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. O elemento img: src, alt, width e height
  2. Imagens responsivas com srcset e sizes
  3. O elemento picture para direção artística
  4. figure e figcaption
← Voltar para HTML Academy