Imagem com legenda em documentos HTML

O que são as legendas para imagens HTML?

As legendas para imagens em HTML são descrições ou textos explicativos que acompanham uma imagem. Elas são geralmente usadas para fornecer contexto adicional ou informações sobre a imagem exibida.

Como adicionar legendas nas imagens HTML?

Para adicionar legendas às imagens em HTML, você pode usar o elemento <figure> em conjunto com o elemento <figcaption>. O elemento <figure> é usado para agrupar a imagem e a legenda, enquanto o <figcaption> é usado para definir a legenda da imagem.

Exemplo:

<figure>
  <img src="dino.jpg" width="200" height="200" alt="T-Rex">
  <figcaption>Tiranossauro Rex!</figcaption>
</figure>

Como estilizar as legendas das imagens?

Você pode usar CSS para estilizar as legendas das imagens e torná-las mais atraentes visualmente. Aqui está um exemplo de como fazer isso:

<figure>
  <img src="dino.jpg" width="200" height="200" alt="T-Rex">
  <figcaption class="caption">Tiranossauro Rex!</figcaption>
</figure>

<style>
  .caption {
    font-style: italic;
    color: #555;
  }
</style>

Qual a diferença entre alt e <figcaption>?

O atributo alt e o elemento <figcaption> servem para propósitos diferentes:

• alt: É um atributo do elemento <img> que fornece um texto alternativo para a imagem. Este texto é exibido quando a imagem não pode ser carregada, além de ser usado por leitores de tela para descrever a imagem para usuários com deficiência visual.
• <figcaption>: É um elemento que fornece uma legenda ou descrição para a imagem. Esse texto é exibido junto com a imagem e é visível para todos os usuários.

Acessibilidade e SEO

Adicionar legendas e textos alternativos às imagens não só melhora a experiência do usuário, mas também contribui para a acessibilidade e a otimização para motores de busca (SEO). As legendas ajudam a fornecer contexto adicional, enquanto os textos alternativos permitem que leitores de tela descrevam a imagem para usuários com deficiência visual. Além disso, motores de busca utilizam esses textos para indexar e entender melhor o conteúdo da página.

Origem dos termos: