Figuras, legendas e tempo: figure, figcaption e time

Veja como associar imagens às suas legendas de forma semântica e como marcar datas e horários de maneira legível para máquinas.

Para enriquecer ainda mais o significado do nosso HTML, existem tags semânticas específicas para lidar com conteúdo multimídia e informações de tempo. As tags <figure>, <figcaption> e <time> nos permitem associar imagens a suas legendas de forma robusta e marcar datas e horários de maneira legível para máquinas.

A tag <figure>: conteúdo independente de fluxo

A tag <figure> representa conteúdo auto-contido que é referenciado a partir do fluxo principal do documento, mas que pode ser movido para outro lugar (como uma barra lateral ou um apêndice) sem afetar o fluxo principal. Pense nela como uma "figura" ou "ilustração" em um livro ou artigo.

O que geralmente vai dentro de um <figure>?

  • Imagens: <img> (o uso mais comum).
  • Vídeos: <video>.
  • Áudios: <audio>.
  • Gráficos: <canvas>, <svg>.
  • Blocos de código: <pre><code>.
  • Citações: <blockquote>.

Exemplo de uso de <figure> com <img>:

<p>No exemplo abaixo, podemos ver a representação visual do modelo de caixa do CSS.</p>

<figure>
  <img src="css-box-model.png" alt="Diagrama do Modelo de Caixa do CSS">
  <!-- A legenda virá aqui -->
</figure>

<p>Este modelo é fundamental para entender como os elementos são renderizados.</p>

A tag <figcaption>: a legenda da figura

A tag <figcaption> representa uma legenda ou título para o conteúdo de um <figure>. Ela deve ser o primeiro ou o último elemento filho de um <figure>.

Exemplo de uso de <figure> com <figcaption>:

<p>No exemplo abaixo, podemos ver a representação visual do modelo de caixa do CSS.</p>

<figure>
  <img src="css-box-model.png" alt="Diagrama do Modelo de Caixa do CSS">
  <figcaption>Diagrama ilustrando o Modelo de Caixa do CSS: Conteúdo, Padding, Borda e Margem.</figcaption>
</figure>

<p>Este modelo é fundamental para entender como os elementos são renderizados.</p>

Por que usar <figure> e <figcaption>?

  • Semântica: Associa a legenda diretamente à figura, dando um significado claro para leitores de tela e mecanismos de busca.
  • Acessibilidade: Leitores de tela podem anunciar a legenda junto com a imagem, fornecendo contexto adicional.
  • Organização: Ajuda a agrupar conteúdo multimídia com suas descrições de forma lógica.

A tag <time>: marcando datas e horários

A tag <time> representa um ponto específico no tempo ou um intervalo de tempo. Ela é útil para marcar datas e horários de forma que sejam legíveis tanto para humanos quanto para máquinas.

Características principais:

  • Atributo datetime: Este é o atributo mais importante da tag <time>. Ele fornece a data e/ou hora em um formato legível por máquina (ISO 8601).
  • Conteúdo visível: O texto dentro da tag <time> é o que será exibido para o usuário.

Formatos do atributo datetime (ISO 8601):

  • Ano: <time datetime="2026">2026</time>
  • Data completa: <time datetime="2026-05-28">28 de maio de 2026</time>
  • Data e hora: <time datetime="2026-05-28T20:00">28 de maio de 2026 às 20:00</time>
  • Hora: <time datetime="20:00">20:00</time>
  • Duração: <time datetime="PT3H30M">3 horas e 30 minutos</time> (P = Period, T = Time, H = Hours, M = Minutes)

Exemplo de uso de <time>:

<p>O evento começa em <time datetime="2026-06-15T19:00">15 de junho de 2026 às 19h</time>.</p>

<p>Este artigo foi publicado em <time datetime="2026-05-28">28 de maio de 2026</time>.</p>

<p>A duração do filme é de <time datetime="PT2H15M">2 horas e 15 minutos</time>.</p>

Por que usar <time>?

  • Acessibilidade: Leitores de tela podem interpretar a data/hora de forma mais precisa, e usuários podem configurar seus dispositivos para exibir a data em seu formato preferido.
  • SEO: Mecanismos de busca podem usar as informações de datetime para indexar o conteúdo por data, o que é crucial para notícias e artigos.
  • Funcionalidade: Ferramentas e navegadores podem oferecer funcionalidades como adicionar eventos ao calendário ou converter fusos horários com base no valor de datetime.

Resumindo

  • <figure>:
    • Representa conteúdo auto-contido (imagens, vídeos, gráficos, código, citações).
    • Pode ser movido para outro lugar sem afetar o fluxo principal do documento.
  • <figcaption>:
    • Representa a legenda ou título para o conteúdo de um <figure>.
    • Deve ser o primeiro ou o último filho de <figure>.
  • <time>:
    • Representa um ponto ou intervalo de tempo.
    • Usa o atributo datetime para fornecer a data/hora em formato legível por máquina (ISO 8601).
    • Melhora a acessibilidade, o SEO e a funcionalidade relacionada a tempo.
  • Todas essas tags são elementos semânticos que enriquecem o significado do seu HTML, tornando-o mais compreensível para humanos e máquinas.