Uso de <figure> e <figcaption>

7.1 Elemento <figure>

O uso das tags <figure> e <figcaption> em HTML fornece uma maneira semântica de adicionar imagens e outros elementos multimídia com legendas. Essas tags ajudam a melhorar a estrutura do conteúdo, tornando-o mais acessível e compreensível tanto para os usuários quanto para os motores de busca. Vamos dar uma olhada mais de perto nesses elementos.

O elemento <figure> é usado para marcar conteúdo autônomo que ilustra ou explica o restante do documento. Ele pode conter uma imagem, gráfico, vídeo, áudio, tabela ou até mesmo um bloco de código. Normalmente, o elemento <figure> é usado junto com o elemento <figcaption>, que adiciona uma legenda ao conteúdo de <figure>.

Sintaxe

<figure>
  <!-- Aqui pode haver qualquer elemento multimídia, por exemplo, uma imagem -->
</figure>

Exemplos de uso:

Exemplo 1: Imagem com legenda

<figure>
  <img src="example.jpg" alt="Exemplo de imagem">
  <figcaption>Legenda para a imagem, explicando seu conteúdo</figcaption>
</figure>

Exemplo 2: Tabela com legenda

<figure>
  <table>
    <tr>
      <th>Cabeçalho 1</th>
      <th>Cabeçalho 2</th>
    </tr>
    <tr>
      <td>Dados 1</td>
      <td>Dados 2</td>
    </tr>
  </table>
  <figcaption>Legenda para a tabela</figcaption>
</figure>

7.2 Elemento <figcaption>

O elemento <figcaption> é usado para adicionar uma legenda ao conteúdo do elemento <figure>. Ele pode ser colocado tanto antes quanto depois do conteúdo de <figure>, dependendo das preferências do desenvolvedor ou dos requisitos de design.

Sintaxe

<figure>
  <!-- Conteúdo do elemento figure -->
  <figcaption>Legenda para o conteúdo</figcaption>
</figure>

Exemplos de uso:

Exemplo 1: Legenda após a imagem

<figure>
  <img src="landscape.jpg" alt="Paisagem">
  <figcaption>Bela paisagem com montanhas e lago</figcaption>
</figure>

Exemplo 2: Legenda antes da imagem

<figure>
  <figcaption>Bela paisagem com montanhas e lago</figcaption>
  <img src="landscape.jpg" alt="Paisagem">
</figure>

7.3 Acessibilidade e SEO

O uso dos elementos <figure> e <figcaption> melhora a acessibilidade e SEO do seu site. Os leitores de tela, usados por pessoas com deficiências, entendem melhor o contexto da imagem graças à tag semântica <figcaption>. Os motores de busca também consideram a estrutura do documento HTML, o que ajuda a melhorar o índice e o ranking da página.

Exemplos de uso em vários contextos:

Exemplo 1: Embutindo um gráfico

<figure>
  <img src="chart.png" alt="Gráfico mostrando crescimento de vendas">
  <figcaption>Gráfico mostrando crescimento de vendas no último trimestre</figcaption>
</figure>

Exemplo 2: Conteúdo de vídeo com legenda

<figure>
  <video controls>
    <source src="example.mp4" type="video/mp4">
    Seu navegador não suporta vídeo.
  </video>
  <figcaption>Exemplo de vídeo demonstrando o funcionamento do produto</figcaption>
</figure>

Exemplo 3: Código com explicação

<figure>
  <pre>
    <code>
      function helloWorld() {
        console.log('Hello, world!');
      }
    </code>
  </pre>
  <figcaption>Exemplo de função em JavaScript que imprime "Hello, world!" no console</figcaption>
</figure>

7.4 Estilo e formatação com CSS

A estilização dos elementos <figure> e <figcaption> com CSS permite criar uma apresentação visual atraente e melhorar a percepção do conteúdo.

Exemplo com aplicação de estilos:

figure {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px;
  text-align: center;
}

figcaption {
  font-style: italic;
  color: #555;
  margin-top: 10px;
}

<figure>
  <img data-max-width="800" data-id="ef101655-fef4-40b9-8b6c-f0c02494a747" src="https://cdn.javarush.com/images/article/ef101655-fef4-40b9-8b6c-f0c02494a747/800.jpeg" alt="nature">
  <figcaption>Vista bonita da natureza</figcaption>
</figure>

<figure>
  <img src="nature.jpg" alt="Natureza">
  <figcaption>Vista bonita da natureza</figcaption>
</figure>

O uso dos elementos <figure> e <figcaption> fornece uma maneira semântica e estruturada de adicionar conteúdo multimídia com legendas nas páginas web. Esses elementos não apenas melhoram a acessibilidade e SEO, mas também tornam o conteúdo mais compreensível e estruturado para os usuários.