Figure e Figcaption

Mídia sem contexto vira silêncio técnico

Uma imagem pode valer mil palavras para quem enxerga, mas pode virar um vazio para robôs de busca e usuários de leitores de tela quando não recebe estrutura, descrição e contexto.

<figure>
  <img src="grafico-vendas.png" alt="Gráfico de barras mostrando aumento de 20% nas vendas">
  <figcaption>Figura 1: Crescimento das vendas no primeiro trimestre.</figcaption>
</figure>

Alt descreve. Figcaption contextualiza.

O atributo alt descreve o que a imagem mostra. A tag figcaption explica o contexto, o significado, a autoria, o número da figura ou a conclusão técnica.

• alt: substituição textual da imagem para quem não a vê ou quando ela falha.
• figcaption: legenda visível que adiciona contexto para todos os usuários.
• figure: agrupa mídia e legenda como uma unidade semântica.

<!-- Bom -->
<figure>
  <img src="dashboard.png" alt="Painel com gráfico de linhas e cards de métricas">
  <figcaption>Figura 2: Dashboard usado para acompanhar desempenho mensal.</figcaption>
</figure>

<!-- Ruim: legenda genérica -->
<figcaption>Imagem bonita</figcaption>

Figure também documenta código, tabelas, gráficos e vídeo

<figure>
  <pre><code>&lt;main&gt;Conteúdo principal&lt;/main&gt;</code></pre>
  <figcaption>Listagem 1: Exemplo de bloco de código documentado.</figcaption>
</figure>

Mídia precisa ser entendida por humanos e máquinas

figure sinaliza que a mídia e a legenda formam um bloco lógico. Isso ajuda leitores de tela, documentação técnica, buscadores, galerias, portfólios e artigos profissionais.

• Use alt em toda imagem informativa.
• Use figcaption para contexto útil, não decoração.
• Explique gráficos complexos em texto acessível.
• Não esconda informação importante somente dentro da imagem.
• Use figure apenas quando o conteúdo for autocontido.
• Não use figure para ícones decorativos.

Como decidir entre img solta e figure

Use figure quando a mídia fizer sentido sozinha e precisar de contexto próprio. Use uma img simples quando a imagem for apenas parte direta do fluxo ou decoração.

• A mídia faz sentido fora do parágrafo? Use figure.
• Ela precisa de legenda visível? Use figcaption.
• Ela é decorativa? Não use figure.
• A legenda adiciona contexto? Mantenha.
• A legenda está vazia? Remova.
• O figcaption é primeiro ou último filho do figure? Correto.
• A imagem informativa tem alt? Obrigatório.
• O alt e a legenda são diferentes? Melhor para acessibilidade.

<section aria-labelledby="galeria">
  <h2 id="galeria">Galeria Semântica</h2>

  <figure>
    <img src="projeto-1.png" alt="Tela inicial de um painel administrativo">
    <figcaption>Projeto 1: Painel administrativo HTML com tabela e formulário.</figcaption>
  </figure>

  <figure>
    <img src="projeto-2.png" alt="Página com cards de aulas organizados">
    <figcaption>Projeto 2: Organização visual das aulas do módulo HTML5.</figcaption>
  </figure>
</section>

15 perguntas para provar domínio

1. O que é conteúdo autocontido? Unidade que faz sentido por si só fora do fluxo principal.
2. Onde pode ficar o figcaption? Como primeiro ou último filho do figure.
3. Figure serve só para imagem? Não, também serve para código, tabela, gráfico e vídeo.
4. Diferença entre alt e figcaption? Alt descreve a imagem; figcaption contextualiza.
5. Figcaption é obrigatória? Não, mas é altamente útil.
6. Figure para ícone decorativo? Não.
7. Figure é inline ou bloco? Elemento de bloco.
8. Como figure ajuda acessibilidade? Agrupa mídia e descrição em uma unidade lógica.
9. O que acontece se mover um figure para apêndice? Ele deve continuar compreensível.
10. Pode haver duas imagens no mesmo figure? Sim, se compartilharem o mesmo propósito e legenda.
11. Quais tags envolvem código dentro de figure? pre e code.
12. Figure ajuda SEO? Sim, melhora contexto indexável da mídia.
13. Por que não usar parágrafo como legenda? Porque perde a conexão semântica com a mídia.
14. Alt ausente em imagem informativa é erro? Sim.
15. Qual arquivo do desafio? midia-semantica-html5.html.

Registre sua página de mídia semântica

git status
git add .
git commit -m "aula-29: cria pagina de midia semantica html5"
git push

• git status: verifica novos arquivos de mídia semântica.
• git add .: prepara a página para commit.
• git commit: documenta sua evolução em figure e figcaption.
• git push: envia seu conhecimento para o GitHub.