Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Os elementos figure e figcaption da HTML5

Publicado em: 2010-04-13 — 58.018 visualizacoes

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:

Orangotando jovem pendurando na corda

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 nas árvores
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:

KooaburraPelicano na praiaPapagaio colorido
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/

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2010-04-13 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2010/04/13/os-elementos-figure-e-figcaption-da-html5/trackback no seu site.

15 comentários na matéria: “Os elementos figure e figcaption da HTML5”

  1. WagnerNo Gravatar disse:

    Ótimo post, sempre esclarecedor.
    Parabéns!

  2. FlavioNo Gravatar disse:

    Pessoal,
    Estou trabalhando em um projeto HTML5 muito legal, chamado Zeewe (http://zeewe.com).
    Trata-se de uma loja de aplicativos HTML5 indepentende, através desta loja é possível instalar aplicativos em iphone, android, ipad, e todos demais browsers que suportam HTML5.
    Queremos fomentar o HTML5 através de uma loja independente e gratuita, além de usar a audiência da loja para distribuir aplicativos, o desenvolvedor pode user api´s de billing para cobrar por features ou virtual goods dentro dos aplicativos, como já é comum nas apps nativas iphone e android.
    Se tiverem projetos, ideias ou intesse na tecnologia HTML5, entrem em contato, feedbacks são muito bem vindos.
    flavio.stecca@zeewe.com

  3. Henrique PachecoNo Gravatar disse:

    @Agência web Sonna: benefícios em SEO? Claro!

    Quanto mais semântica, melhor para SEO, oras. Sempre!

    E desculpe, não compreendi onde o HTML5 melhorou o “visual gráfico” por conta disto. Poderia me clarear?

    Lembrando também que tag’s não são comandos, são marcações. Comandos executam algo.(desculpe possível chateação)

    Maujor, muito bom o artigo, muito obrigado!

  4. adailtonNo Gravatar disse:

    ai tem como posicionar objeto na tela com html5? ou nao?

  5. Marcelo Mello RamosNo Gravatar disse:

    Valeu pelas dicas estou estudando html e gostei.

  6. johnatanNo Gravatar disse:

    Muito bom, o html5 vem pra revolucionar a web !

  7. Agência web SonnaNo Gravatar disse:

    Muito legal esse comando!

    Além de trazer um visual gráfico mais interessante, será que traz benefícios em SEO?

    Obrigado!

    Abraços!

  8. Vidro TemperadoNo Gravatar disse:

    Ótimo Maujor, seus posts são ótimos.
    Obrigada
    Marcia

  9. eder proteçãoNo Gravatar disse:

    Sempre trazendo novos elementos para nossa atualização, este comando ainda não conhecia, por isso vale a pena ficar ligado na rede e no seu site
    obrigado

  10. LuizNo Gravatar disse:

    Muito bom Maujor……..obrigado

  11. Maikon RangelNo Gravatar disse:

    Muito bom show de bola, vc manda muito bem, esse cara tar por fora.

  12. Felipe KautzmannNo Gravatar disse:

    Ótimo Maujor, seus posts são ótimos.
    Continue postando informações sobre HTML 5!
    Grande abraço do @felipekm

  13. anjoNo Gravatar disse:

    era tudo que eu estava procurando.
    Showwwwwwwzera.

    Obrigadoooooooooooow.

    Abraço.

  14. Rafael FracassoNo Gravatar disse:

    Acho que o amigo Joarez não tem noção da idade do “Dinossauro das CSS” para dizer que ele é velho para o negócio…

  15. Joarez de Sousa RibeiroNo Gravatar disse:

    Estou estudando html, css, estudo sozinho gostaria de algumas dicas de vc, já estou velho para o negocio mais acredoto que vou apender.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo