Neste tutorial de imagens do nosso portal, vamos aprender detalhadamente como inserir figuras, ilustrações e fotos utilizando as tags semânticas do HTML5. Vamos entender na prática o que mudou em relação ao antigo HTML4, como abandonar de vez a "div-mania" e criar layouts muito mais elegantes, acessíveis e amigáveis para os motores de busca como o Google.
Imagens em HTML5: O que mudou e por que usar <figure>?
No HTML5, a tag <figure> é usada para encapsular conteúdos autônomos (como imagens, gráficos e trechos de código), enquanto a tag <figcaption> define sua legenda semântica. Essa estrutura melhora o SEO, a acessibilidade e a organização do código em relação ao uso de simples <div>s.
Quanto mais nos aprofundamos no estudo do HTML5, mais clara fica a sua principal missão: tornar a web mais simples, estruturada e cheia de significado. O uso de figuras através das tags <figure> e <figcaption> (destinada às legendas) é um dos maiores exemplos dessa revolução semântica.
Se você se lembra bem do nosso Tutorial de Imagens em CSS, no passado era muito comum recomendarmos o uso do elemento <div> para criar divisões e envelopar cada imagem e seu texto descritivo. O problema é que a tag <div> é genérica demais — usamos div para cabeçalhos, rodapés, menus, banners e praticamente qualquer bloco de um site (a famosa "div-mania" da década passada).
Para um leitor de tela (acessibilidade) ou para o robô de indexação do Google (SEO), uma <div> não possui nenhum significado especial. Se você bater o olho em uma div no meio de mil linhas de código, não sabe exatamente qual é a função dela até ler o CSS. Já quando você visualiza o elemento <figure>, o próprio nome já entrega a intenção exata do conteúdo!
🛠️ Curiosidade Dev Sênior:
A tag <figure> não serve exclusivamente para fotos! De acordo com a documentação oficial do MDN Web Docs, ela é projetada para conter qualquer bloco de conteúdo autônomo que possa ser movido do corpo do texto principal sem prejudicar o fluxo da leitura — como diagramas, citações longas (<blockquote>), tabelas de dados ou até trechos de código-fonte!
Com o HTML5, nossas imagens deixaram de ser meras imagens soltas ou divs genéricas. Elas se tornaram blocos semânticos independentes no fluxo do documento Web.
A Evolução: Do "Jeito Antigo" ao "Jeito Semântico HTML5"
Para fixarmos bem o conceito do Gain of Information (Ganho de Informação), vamos analisar a comparação visual e estrutural entre a marcação legada dos anos 2000 e o padrão moderno exigido no mercado de trabalho atual:
1. O Jeito Antigo (Não Semântico):
<!-- Antigamente: Divs genéricas e parágrafos sem relação semântica -->
<div class="box-imagem">
<img src="html5-logo.png" alt="Logo do HTML5" width="150" height="150" />
<p class="legenda-foto">Figura 1: Logotipo Oficial do HTML5</p>
</div>2. O Jeito Moderno e Semântico (HTML5):
<!-- Padrão Moderno: Semântica clara, acessível e otimizada para SEO -->
<figure class="card-imagem">
<img src="html5-logo.png" alt="Logo oficial do HTML5 com fundo laranja" title="Logo do HTML5" width="150" height="150" style="max-width: 100%; height: auto;" />
<figcaption>Figura 1: Logotipo Oficial do HTML5</figcaption>
</figure>Como Inserir Figuras em HTML5: Usando a Tag <figure>
Para envolver figuras, fotos e imagens em nossos sites com HTML5, utilizamos o elemento <figure>. Dentro dessa tag de abertura e fechamento (<figure>...</figure>), colocamos a nossa conhecida tag <img> com seus devidos atributos.
Por exemplo, para colocar uma imagem de nome html5.png, definindo os atributos src, alt, title, width e height, o código é estruturado assim:
<figure>
<img src="html5.png" alt="Logotipo do HTML5" title="Tecnologia HTML5" width="150" height="150" style="max-width: 100%; height: auto;" />
</figure>💡 Dica de Ouro de Performance (Core Web Vitals):
Nunca remova os atributos width e height numéricos da tag <img>! Eles ajudam o navegador a reservar o espaço correto na tela antes do carregamento da imagem, evitando o "pulo de layout" (CLS - Cumulative Layout Shift). Para garantir a responsividade perfeita em celulares, combine-os sempre com a regra CSS em linha style="max-width: 100%; height: auto;".
Além disso, o HTML5 permite agrupar múltiplas imagens dentro do mesmo bloco <figure>. Isso é incrível para criar galerias simples, comparações do tipo "Antes e Depois" ou exibir logos lado a lado:
<!-- Exemplo com Múltiplas Imagens na mesma Figura -->
<figure class="galeria-stack">
<img src="html5.png" alt="Logo do HTML5" title="HTML5" width="150" height="150" style="max-width: 100%; height: auto;" />
<img src="css3.png" alt="Logo do CSS3" title="CSS3" width="150" height="150" style="max-width: 100%; height: auto;" />
<figcaption>Tecnologias Essenciais do Desenvolvimento Front-End moderno.</figcaption>
</figure>
Quer Dominar Front-End de Verdade e Estudar Offline?
Leve o curso completo de HTML5 e CSS3 no seu bolso! Baixe nossa Apostila Digital em PDF com centenas de exemplos práticos, projetos completos e sem anúncios para atrapalhar seu aprendizado.
"Eu apanhava muito para entender semântica e CSS. A apostila explicou tudo de forma limpa e objetiva. Valeu cada centavo!" — Lucas Andrade, Desenvolvedor Jr.
Legenda em Figuras no HTML5: A Tag <figcaption>
Uma boa prática indispensável para qualquer desenvolvedor web é adicionar legendas descritivas às suas imagens. Isso é comum em jornais e portais de conteúdo, mas na Web vai muito além do apelo estético.
O uso de legendas é um poderoso fator de SEO (Search Engine Optimization). As legendas fornecem contexto direto para os buscadores entenderem exatamente o assunto tratado na imagem, aumentando drasticamente as chances do seu post rankear no Google Imagens.
No antigo HTML, os programadores usavam tags como <caption> (que pertence à estrutura de tabelas) ou parágrafos estilizados manualmente. No HTML5, basta utilizar o elemento <figcaption> dentro do bloco <figure>.
A única regra estrita de sintaxe é: o <figcaption> deve ser colocado como o primeiro ou como o último filho dentro da tag <figure>. Veja o código completo abaixo:
<figure class="card-tecnologia">
<img src="html5.png" alt="Logotipo do HTML5 sobre fundo vermelho" title="Logo do HTML5" width="150" height="150" style="max-width: 100%; height: auto;" />
<figcaption>Figura 1: Logotipo Oficial do HTML5 e sua estrutura semântica.</figcaption>
</figure>⚠️ Cuidado com este Erro de Acessibilidade:
A tag <figcaption> NÃO substitui o atributo alt da imagem! O atributo alt descreve o conteúdo visual para leitores de tela caso a imagem falhe ao carregar. O <figcaption> é uma legenda visível que adiciona contexto editorial para todos os leitores do site. Use ambos juntos!
Exemplo Prático: Resultado Renderizado na Tela
Confira abaixo como o código HTML5 é renderizado visualmente no navegador do usuário quando adicionamos uma estilização CSS moderna e limpa:
Estilizando <figure> e <figcaption> com CSS
Por padrão, a maioria dos navegadores aplica uma margem padrão no elemento <figure> (geralmente margin: 1em 40px;). Em layouts responsivos modernos, costumamos zerar essa margem no CSS e aplicar um design de card elegante com Flexbox ou CSS Grid:
/* Estilização Profissional para Figuras */
figure {
margin: 20px 0;
padding: 12px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
figcaption {
margin-top: 8px;
font-size: 0.875rem;
color: #64748b;
font-style: italic;
}Perguntas Frequentes sobre <figure> e <figcaption> (FAQ)
Posso usar mais de uma tag <figcaption> em um mesmo <figure>?
Não. O padrão da W3C especifica que você só pode incluir no máximo uma tag <figcaption> por bloco <figure>, posicionada no início ou no final do conteúdo.
É obrigatório colocar <figcaption> toda vez que eu usar <figure>?
Não é obrigatório. Você pode utilizar a tag <figure> para isolar uma imagem ou gráfico sem necessariamente adicionar uma legenda com <figcaption>.
Qual a diferença entre a tag <figure> e a tag <aside>?
A tag <figure> é usada para conteúdos diretamente referenciados no texto principal (como "veja a Figura 1"). Já a tag <aside> é para conteúdos relacionados de forma indireta ou tangencial (como blocos de anúncios, barras laterais ou avisos complementares).
O que estudar a seguir:
- Como Formatar Imagens em CSS: Bordas, Margens e Alinhamentos
- Tag <img> em HTML: Atributos SRC, ALT e TITLE Explicados
- Guia Completo de Semântica no HTML5 para Iniciantes
Próximos artigos da trilha de estudos:
- Formatos de Imagem para Web: WebP, PNG, JPEG e SVG (Qual Escolher?)
- Como Criar Favicons Semânticos no HTML5
- Imagens Responsivas com a Tag <picture> e Atributo srcset
- Otimização de Imagens para SEO e Carregamento Rápido no Blogger
