Figure e Figcaption – HTML5

6 de março de 2012 por Kadu Oliveira

Muito comum em material impresso, como revistas e jornais, uma imagem ou gráfico seguida por uma pequena legenda. Na web antes da HTML5 não tinha uma maneira de aplicar semanticamente esse tipo de conteúdo na marcação HTML. A boa notícia é que agora é possível fazer uma marcação semântica para esta finalidade. Veremos os elementos <figure> & <figcaption>.

Elemento figure

Esse serve para englobar conteúdos independentes que sejam relacionados a um conteúdo específico na página web. Usamos esse elemento para marcar conteúdos do tipo: imagens, ilustrações, diagramas, fotos, vídeos, linhas de códigos…

Os conteúdos que estiverem dentro do <figure> podem ser movidos para longe do fluxo principal da página sem afetar o significado da página. Muitas vezes o elemento figure é acompanhada pelo elemento <figcaption>.

Cuidado com a tentação de aplicar em todas suas imagens a tag <figure>, pois isso não é correto. Para utilizar melhor esse elemento você deve pensar em como a imagem é utilizada na sua página web. Se a imagem faz parte do conteúdo da página e for movida para outro local sem perder seu significado, é sinal que ela pode ficar dentro do novo elemento <figure>. Caso a imagem seja um ícone de navegação, um logotipo, imagens que devem estar num local específico em um artigo (tal como um artigo de tutorial passo-a-passo, com várias imagens na página) não devem estar marcadas com o elemento <figure>.

Exemplo elemento figure:

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock"
  width="304" height="228" />
</figure>

Elemento figcaption

Utilizado para marcar uma legenda para conteúdos inseridos com uso do elemento <figure>. Sempre deve vir entre o elemento <figure>, ou seja, deve constar como elemento-filho do elemento <figure>. A tag <figcaption>só é válido dentre do <figure>.

Usando os dois elementos

Já vimos qual o objetivo dos dois novos elementos HTML5, veja agora como podemos usa-los em conjunto. Estes elementos são usados em combinação para apoiar uma melhor acessibilidade e maior clareza quanto ao conteúdo de gráficos, imagens, etc.

<figure>
  <img src="kurt-cobain.jpg" alt="Kurt Cobain">
  <figcaption>Kurt Cobain, vocalista e guitarrista da banda Nirvana</figcaption>
</figure>

Você pode ter várias imagens, vídeos, gráficos… dentro de um único elemento <figure>. Note também que o <figcaption> pode ser usado antes ou após os elementos gráficos. Perceba que no próximo exemplo a legenda aparece antes, diferentemente do primeiro exemplo. Veja abaixo.

<figure>
  <figcaption>Filme Expendables e Kurt Cobain</figcaption>  
  <video src="expendables.mov">
  <img src="kurt-cobain.jpg" alt="Kurt Cobain">
</figure>

Usando o elemento em trechos de códigos

<figure>
  <figcaption>CSS para estilizar o element P </figcaption>  
   <code>
     p{font-size:14px;color:#FF00AB;}
   </code>
</figure>

O resultado será o seguinte:

Kurt Cobain, vocalista e guitarrista da banda Nirvana

Você pode criar um efeito visual não deixando a legenda sempre visível. Isso pode ser feito através de uma marcação adicional no HTML e estilização com CSS para mostrar/ocultar o texto da legenda quando a imagem receber o mouse sobre a imagem.

Como qualquer outro elemento HTML você pode estilizar esses dois elementos apresentados no artigo. Para uma demostração simples criei uma Página de Exemplos.

Me siga no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

Forte abraço!