Os elementos figure e figcaption da HTML5

Em mídia impressa tradicional, tais como livros e revistas, as imagens, gráficos, ou fragmentos de código devem vir acompanhados de uma legenda. Até recentemente não existia uma maneira semântica de marcar, no HTML, o conteúdo de uma legenda, e tínhamos que nos valer de nomes de classes e CSS. A HTML5 espera resolver este problema criando dois elementos denominados <figure> e <figcaption>. Vamos examinar estes elementos!

O elemento <figure>

O elemento <figure> é para ser usado em conjunto com o elemento <figcaption>. Sua finalidade é para marcar diagramas, ilustrações, fotos, e fragmentos de código (entre outros conteúdos). Vejamos o que diz as especificações sobre o elemento <figure>:

O elemento <figure> destina-se a marcar uma unidade de conteúdo e opcionalmente uma legenda para o conteúdo que se constitue em uma peça isolada do fluxo principal do documento e pode ser retirada daquele fluxo sem alterar o significado do documento.
Especificação W3C

O elemento <figcaption>

O elemento <figcaption> tem sido assunto para muito debate na comunidade envolvida com a HTML5. Inicialmente a intenção das especificações para HTML5 era alterar a finalidade do elemento, existente, <legend> e não, criar um novo elemento. Houve sugestões para alterar a finalidade de outros elementos existentes com o mesmo propósito, tais como, os elementos <label>, <caption>, <p> e até mesmo os elementos <h1>–<h6>. O elemento <legend> foi alterado , e passamos a usar os elementos <dt> e <dd> dentro do elemento <figure> conforme sugerido por Jeremy’s. A maioria das sugestões apresentadas para resolver a questão apresentou problemas de retrocompatibilidade para estilização com CSS.

Aqueles que acompanham a evolução da HTML5 estão cientes de que um novo elemento foi recentemente criado , e foi denominado <figcaption>. Ninguém sabe se ele será definitivo, contudo leia a seguir o que as especificações dizem sobre o elemento <figcaption>:

O elemento figcaption destina-se a marcar o cabeçalho ou a legenda para uma figura.
Especificações W3C

O elemento <figcaption> é opcional e pode ser posicionato antes ou depois do conteúdo do elemento <figure>. É permitida a inserção de apenas um elemento <figcaption> dentro do elemento <figure>, embora o elemento <figure> em si possa conter outros elementos-filhos (por exemplo: <img> ou <code>).

Uso dos elemementos <figure> e <figcaption>

Bem, já sabemos o que as especificações dizem sobre estes elementos. Como usá-los? Vejamos alguns exemplos.

Elemento <figure> com uma image

O elemento <figure> contém uma imagem sem legenda:

Observe o código para este caso:

...
<figure>
  <img src="/orang-utan.jpg" alt="Orangotango jovem pendurado em uma corda">
</figure>

Elemento <figure> com uma image e legenda

O elemento <figure> contém uma imagem e uma legenda explicativa:

Macaco do rio Lower Kintaganban, Borneo.
Original por Richard Clark

Observe o código para este caso:

...
<figure>
  <img src="/macaque.jpg" alt="Macaco nas árvores">
  <figcaption>Macaco do rio Lower Kintaganban, Borneo. Original por <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

Elemento <figure> com múltiplas imagens

O elemento <figure> contém múltiplas imagens aninhadas e uma legenda:

Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio.
Imagens por: Richard Clark

Observe o código para este caso:

...
<figure>
  <img src="/kookaburra.jpg" alt="Kooaburra">
  <img src="/pelican.jpg" alt="Pelicano na praia">
  <img src="/lorikeet.jpg" alt="Papagaio">
  <figcaption>Pássaros Australianos. Da esquerda para direita, Kookburra, Pelicano e Papagaio. Originais por <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

Elemento <figure> com um bloco de código

O elemento <figure> pode ser usado para exemplificar código:

<small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a></small>

Uso do elemento <small> em link com atributo rel="license"
para Creative Commons license.

Observe o código para este caso:

...
<figure>
<blockquote><p><code><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution Share-alike license</a&gt;</small></code></p></blockquote>
<figcaption>Uso do elemento <code><small></code> em um link com <code>rel="license"</code> <a href="http://creativecommons.org/choose/" title="Escolha uma licença">Creative Commons license</a></figcaption>
</figure>

Diferenças entre os elementos <figure> e <aside>

Nós apresentamos o elemento <aside> em um artigo anterior , mas é importante ressaltar a diferença entre eles. A pergunta que se deve fazer para decidir o uso entre os elementos <aside> e <figure> é: O conteúdo a ser marcado é essencial para o entendimento da seção?

• Se o conteúdo não for essencial use <aside>.
• Se o conteúdo é essencial, mas sua posição no fluxo do documento é irrelevante use <figure>.

Dito isto considere ainda a posição do elemento em relação aos conteúdos anteriores e posteriores e dependendo disto use um elemento mais apropriado, por exemplo: um <div>, um elemento <img>, um elemento <blockquote>, ou até mesmo o elemento <canvas>, tudo dependendo do conteudo a marcar.

Não pare por aqui!

Você não precisa ficar limitado a imagens e exemplos de código para usar o elemento <figure>. Outros conteúdos, tais como, áudio vídeo, gráficos (talvez usando <canvas> ou <svg>), poemas, ou tabelas sobre estatísticas são possíveis candidatos a serem marcados com <figure>.

Contudo nem sempre é apropriado o uso do elemento <figure>. Por exemplo: Um banner gráfico não deve ser marcado com o elemento <figure>. Neste caso use o elemento <img>.

Sumário

Conforme vimos neste artigo há muitas situações nas quais é indicado o uso do elemento <figure>. Apenas certifique-se que para o seu conteúdo é este o elemento mais apropriado para marcar. Mas, afinal você já faz isto para toda a sua marcação. Certo? 🙂

Créditos:

Autor: Richard Clark
URL do artigo original: http://html5doctor.com/the-figure-figcaption-elements/