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 — 50.929 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/

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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