{"id":2434,"date":"2012-03-06T11:10:09","date_gmt":"2012-03-06T13:10:09","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2434"},"modified":"2012-03-06T11:57:23","modified_gmt":"2012-03-06T13:57:23","slug":"figure-e-figcaption-html5","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5","title":{"rendered":"Figure e Figcaption – HTML5"},"content":{"rendered":"

\"HTML5\"<\/p>\n

Muito comum em material impresso, como revistas e jornais, uma imagem ou gr\u00e1fico seguida por uma pequena legenda. Na web antes da HTML5 n\u00e3o tinha uma maneira de aplicar semanticamente esse tipo de conte\u00fado na marca\u00e7\u00e3o HTML. A boa not\u00edcia \u00e9 que agora \u00e9 poss\u00edvel fazer uma marca\u00e7\u00e3o sem\u00e2ntica<\/strong> para esta finalidade. Veremos os elementos <figure><\/code> & <figcaption><\/code>.
\n<\/p>\n

Elemento figure<\/h2>\n

Esse serve para englobar conte\u00fados independentes que sejam relacionados a um conte\u00fado espec\u00edfico na p\u00e1gina web. Usamos esse elemento para marcar conte\u00fados do tipo: imagens, ilustra\u00e7\u00f5es, diagramas, fotos, v\u00eddeos, linhas de c\u00f3digos…<\/p>\n

Os conte\u00fados que estiverem dentro do <figure><\/code> podem ser movidos para longe do fluxo principal da p\u00e1gina sem afetar o significado da p\u00e1gina. Muitas vezes o elemento figure \u00e9 acompanhada pelo elemento <figcaption><\/code>.<\/p>\n

Cuidado com a tenta\u00e7\u00e3o de aplicar em todas suas imagens a tag <figure><\/code>, pois isso n\u00e3o \u00e9 correto. Para utilizar melhor esse elemento voc\u00ea deve pensar em como a imagem \u00e9 utilizada na sua p\u00e1gina web<\/strong>. Se a imagem faz parte do conte\u00fado da p\u00e1gina e for movida para outro local sem perder seu significado, \u00e9 sinal que ela pode ficar dentro do novo elemento <figure><\/code>. Caso a imagem seja um \u00edcone de navega\u00e7\u00e3o, um logotipo, imagens que devem estar num local espec\u00edfico em um artigo (tal como um artigo de tutorial passo-a-passo, com v\u00e1rias imagens na p\u00e1gina) n\u00e3o devem estar marcadas com o elemento <figure><\/code>.<\/p>\n

Exemplo elemento figure:<\/h3>\n
\r\n<figure>\r\n  <img src="img_pulpit.jpg" alt="The Pulpit Rock"\r\n  width="304" height="228" \/>\r\n<\/figure>\r\n<\/pre>\n
Elemento figcaption<\/h2>\n
Utilizado para marcar uma legenda para conte\u00fados inseridos com uso do elemento <figure><\/code>. Sempre deve vir entre o elemento <figure><\/code>, ou seja, deve constar como elemento-filho do elemento <figure><\/code>. A tag <figcaption><\/code>s\u00f3 \u00e9 v\u00e1lido dentre do <figure><\/code>.<\/p>\n
Usando os dois elementos<\/h3>\n
J\u00e1 vimos qual o objetivo dos dois novos elementos HTML5, veja agora como podemos usa-los em conjunto. Estes elementos s\u00e3o usados \u200b\u200bem combina\u00e7\u00e3o para apoiar uma melhor acessibilidade e maior clareza quanto ao conte\u00fado de gr\u00e1ficos, imagens, etc.<\/p>\n
\r\n<figure>\r\n  <img src="kurt-cobain.jpg" alt="Kurt Cobain">\r\n  <figcaption>Kurt Cobain, vocalista e guitarrista da banda Nirvana<\/figcaption>\r\n<\/figure>\r\n<\/pre>\n
Voc\u00ea pode ter v\u00e1rias imagens, v\u00eddeos, gr\u00e1ficos… dentro de um \u00fanico elemento <figure><\/code>. Note tamb\u00e9m que o <figcaption><\/code> pode ser usado antes ou ap\u00f3s os elementos gr\u00e1ficos. Perceba que no pr\u00f3ximo exemplo a legenda aparece antes, diferentemente do primeiro exemplo. Veja abaixo.<\/p>\n
\r\n<figure>\r\n  <figcaption>Filme Expendables e Kurt Cobain<\/figcaption>  \r\n  <video src="expendables.mov">\r\n  <img src="kurt-cobain.jpg" alt="Kurt Cobain">\r\n<\/figure>\r\n<\/pre>\n
Usando o elemento em trechos de c\u00f3digos<\/p>\n
\r\n<figure>\r\n  <figcaption>CSS para estilizar o element P <\/figcaption>  \r\n   <code>\r\n     p{font-size:14px;color:#FF00AB;}\r\n   <\/code>\r\n<\/figure>\r\n<\/pre>\n
O resultado ser\u00e1 o seguinte:<\/p>\n
\n\"Kurt
Kurt Cobain, vocalista e guitarrista da banda Nirvana<\/figcaption><\/figure>\n
Voc\u00ea pode criar um efeito visual n\u00e3o deixando a legenda sempre vis\u00edvel. Isso pode ser feito atrav\u00e9s de uma marca\u00e7\u00e3o adicional no HTML e estiliza\u00e7\u00e3o com CSS<\/a> para mostrar\/ocultar o texto da legenda quando a imagem receber o mouse sobre a imagem.<\/p>\n
\nComo qualquer outro elemento HTML voc\u00ea pode estilizar esses dois elementos apresentados no artigo. Para uma demostra\u00e7\u00e3o simples criei uma P\u00e1gina de Exemplos<\/a>.\n<\/div>\n
Me siga no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n
Forte abra\u00e7o!<\/p>\n","protected":false},"excerpt":{"rendered":"
Muito comum em material impresso, como revistas e jornais, uma imagem ou gr\u00e1fico seguida por uma pequena legenda. Na web antes da HTML5 n\u00e3o tinha uma maneira de aplicar semanticamente esse tipo de conte\u00fado na marca\u00e7\u00e3o HTML. A boa not\u00edcia \u00e9 que agora \u00e9 poss\u00edvel fazer uma marca\u00e7\u00e3o sem\u00e2ntica para esta finalidade. Veremos os elementos […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[],"class_list":["post-2434","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nFigure e Figcaption - HTML5<\/title>\n<meta name=\"description\" content=\"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Figure e Figcaption - HTML5\" \/>\n<meta property=\"og:description\" content=\"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2012-03-06T13:10:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-03-06T13:57:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png\" \/>\n\t<meta property=\"og:image:width\" content=\"550\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5\",\"url\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5\",\"name\":\"Figure e Figcaption - HTML5\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png\",\"datePublished\":\"2012-03-06T13:10:09+00:00\",\"dateModified\":\"2012-03-06T13:57:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png\",\"width\":\"550\",\"height\":\"200\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/html\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Figure e Figcaption – HTML5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Figure e Figcaption - HTML5","description":"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5","og_locale":"pt_BR","og_type":"article","og_title":"Figure e Figcaption - HTML5","og_description":"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.","og_url":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5","og_site_name":"KADUNEW","article_published_time":"2012-03-06T13:10:09+00:00","article_modified_time":"2012-03-06T13:57:23+00:00","og_image":[{"width":550,"height":200,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png","type":"image\/png"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5","url":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5","name":"Figure e Figcaption - HTML5","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png","datePublished":"2012-03-06T13:10:09+00:00","dateModified":"2012-03-06T13:57:23+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Saiba como usar corretamente os novos elementos figure e figcaption da HTML5.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2012\/01\/logo-html5-kadunew.png","width":"550","height":"200"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/html\/figure-e-figcaption-html5#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"HTML","item":"https:\/\/www.kadunew.com\/blog\/category\/html"},{"@type":"ListItem","position":3,"name":"Figure e Figcaption – HTML5"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2434"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=2434"}],"version-history":[{"count":22,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2434\/revisions"}],"predecessor-version":[{"id":2480,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2434\/revisions\/2480"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2434"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2434"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}