{"id":1646,"date":"2010-04-13T14:45:20","date_gmt":"2010-04-13T13:45:20","guid":{"rendered":"http:\/\/html5doctor.com\/?p=1646"},"modified":"2010-05-11T15:37:03","modified_gmt":"2010-05-11T14:37:03","slug":"the-figure-figcaption-elements","status":"publish","type":"post","link":"https:\/\/html5doctor.com\/the-figure-figcaption-elements\/","title":{"rendered":"The figure &#038; figcaption elements"},"content":{"rendered":"<p>In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn&#8217;t have a way of semantically marking up this sort of content directly in our <abbr>HTML<\/abbr>, instead resorting to <abbr>CSS<\/abbr> class names. <abbr>HTML<\/abbr>5 hopes to solve that problem by introducing the <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code> elements. Let&#8217;s explore!<\/p>\r\n\r\n<h2>The <code>&lt;figure&gt;<\/code> element<\/h2>\r\n\r\n<p>The <code>&lt;figure&gt;<\/code> element is intended to be used in conjunction with the <code>&lt;figcaption&gt;<\/code> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <code>&lt;figure&gt;<\/code>:<\/p>\r\n\r\n<blockquote><p>The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document\u2019s meaning.<\/p><footer><cite><a href=\"http:\/\/dev.w3.org\/html5\/markup\/figure.html\">W3C Specification<\/a><\/cite><\/footer><\/blockquote>\r\n\r\n<h2>The <code>&lt;figcaption&gt;<\/code> element<\/h2>\r\n\r\n<p>The <code>&lt;figcaption&gt;<\/code> element has been the <a href=\"http:\/\/adactio.com\/journal\/1604\/\">subject<\/a> of <a href=\"http:\/\/remysharp.com\/2009\/08\/12\/saving-figure-detail\/\">much<\/a> <a href=\"http:\/\/html5doctor.com\/legend-not-such-a-legend-anymore\/\">debate<\/a>. The spec initially wanted to repurpose <code>&lt;legend&gt;<\/code> rather than introduce a new element. Other suggestions included <code>&lt;label&gt;<\/code>, <code>&lt;caption&gt;<\/code>, <code>&lt;p&gt;<\/code> or the <code>&lt;h1&gt;<\/code>\u2013<code>&lt;h6&gt;<\/code> elements. <a href=\"http:\/\/html5doctor.com\/legend-not-such-a-legend-anymore\/\"><code>&lt;legend&gt;<\/code> was changed<\/a>, so we then used a combination of <code>&lt;dt&gt;<\/code> and <code>&lt;dd&gt;<\/code> inside <code>&lt;figure&gt;<\/code> at <a href=\"http:\/\/twitter.com\/adactio\">Jeremy&#8217;s<\/a> suggestion. Most of these suggestions failed since there was no backwards compatibility for styling with <abbr>CSS<\/abbr>.<\/p>\r\n\r\n<p>Regular readers will know that <a href=\"http:\/\/html5doctor.com\/summary-figcaption-element\/\">a new element was recently introduced<\/a>, namely <code>&lt;figcaption&gt;<\/code>. Who knows if it&#8217;ll stick, but for now here&#8217;s what the spec says about <code>&lt;figcaption&gt;<\/code>:<\/p>\r\n\r\n<blockquote><p>The figcaption element represents a caption or legend for a figure.<\/p><footer><cite><a href=\"http:\/\/dev.w3.org\/html5\/markup\/figcaption.html\">W3C Specification<\/a><\/cite><\/footer><\/blockquote>\r\n\r\n<p>The <code>&lt;figcaption&gt;<\/code> element is optional and can appear before <em>or<\/em> after the content within the <code>&lt;figure&gt;<\/code>. Only one <code>&lt;figcaption&gt;<\/code> element may be nested within a <code>&lt;figure&gt;<\/code>, although the <code>&lt;figure&gt;<\/code> element itself may contain multiple other child elements (e.g., <code>&lt;img&gt;<\/code> or <code>&lt;code&gt;<\/code>).<\/p>\r\n\r\n<h2>Using <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code><\/h2>\r\n\r\n<p>So we&#8217;ve seen what the spec says about these elements. How do we use them? Let&#8217;s look at some examples.<\/p>\r\n\r\n<h3>Figure with an image<\/h3>\r\n\r\n<p>An image within a <code>&lt;figure&gt;<\/code> element without a caption:<\/p>\r\n\r\n<figure><img decoding=\"async\" src=\"http:\/\/html5doctor.com\/wp-content\/uploads\/2010\/03\/orang-utan.jpg\" alt=\"Baby Orang Utan hanging from a rope\"><\/figure>\r\n\r\n<p>Here&#8217;s the code for that:<\/p>\r\n\r\n<pre><code>&lt;figure&gt;\r\n  &lt;img src=\"\/orang-utan.jpg\" alt=\"Baby Orang Utan hanging from a rope\"&gt;\r\n&lt;\/figure&gt;<\/code><\/pre>\r\n\r\n<h3>Figure with an image and caption<\/h3>\r\n\r\n<p>An image within a <code>&lt;figure&gt;<\/code> element with an explanatory caption:<\/p>\r\n\r\n<figure><img decoding=\"async\" src=\"http:\/\/html5doctor.com\/wp-content\/uploads\/2010\/03\/macaque.jpg\" alt=\"Macaque in the trees\"><figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href=\"http:\/\/www.flickr.com\/photos\/rclark\/102352241\/in\/set-72057594082373448\/\">Richard Clark<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n<p>and the code that we used:<\/p>\r\n\r\n<pre><code>&lt;figure&gt;\r\n  &lt;img src=\"\/macaque.jpg\" alt=\"Macaque in the trees\"&gt;\r\n  &lt;figcaption&gt;A cheeky macaque, Lower Kintaganban River, Borneo. Original by &lt;a href=\"http:\/\/www.flickr.com\/photos\/rclark\/\"&gt;Richard Clark&lt;\/a&gt;&lt;\/figcaption&gt;\r\n&lt;\/figure&gt;<\/code><\/pre>\r\n\r\n<h3>A figure with multiple images<\/h3>\r\n\r\n<p>Nesting multiple images within one <code>&lt;figure&gt;<\/code> element with a single caption:<\/p>\r\n\r\n<figure class=\"trptych\"><img decoding=\"async\" src=\"http:\/\/html5doctor.com\/wp-content\/uploads\/2010\/03\/kookaburra.jpg\" alt=\"Kooaburra\"><img decoding=\"async\" src=\"http:\/\/html5doctor.com\/wp-content\/uploads\/2010\/03\/pelican.jpg\" alt=\"Pelican stood on the beach\"><img decoding=\"async\" src=\"http:\/\/html5doctor.com\/wp-content\/uploads\/2010\/03\/lorikeet.jpg\" alt=\"Cheeky looking Rainbow Lorikeet\"><figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet.<br>Originals by <a href=\"http:\/\/www.flickr.com\/photos\/rclark\/\">Richard Clark<\/a><\/figcaption>\r\n<\/figure>\r\n\r\n<p>The code:<\/p>\r\n\r\n<pre><code>&lt;figure&gt;\r\n  &lt;img src=\"\/kookaburra.jpg\" alt=\"Kooaburra\"&gt;\r\n  &lt;img src=\"\/pelican.jpg\" alt=\"Pelican stood on the beach\"&gt;\r\n  &lt;img src=\"\/lorikeet.jpg\" alt=\"Cheeky looking Rainbow Lorikeet\"&gt;\r\n  &lt;figcaption&gt;Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by &lt;a href=\"http:\/\/www.flickr.com\/photos\/rclark\/\"&gt;Richard Clark&lt;\/a&gt;&lt;\/figcaption&gt;\r\n&lt;\/figure&gt;<\/code><\/pre>\r\n\r\n<h3>Figure with a code block<\/h3>\r\n\r\n<p>The <code>&lt;figure&gt;<\/code> element may also be used for code examples:<\/p>\r\n\r\n<figure><blockquote><p><code>&lt;small&gt;&lt;a rel=\"license\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/\">Creative Commons Attribution Share-alike license&lt;\/a&gt;&lt;\/small&gt;<\/code><\/p><\/blockquote>\r\n<figcaption>Using <code>&lt;small&gt;<\/code> around a <a href=\"http:\/\/creativecommons.org\/choose\/\" title=\"Choose a License\">Creative Commons license<\/a> link with <code>rel=\"license\"<\/code><\/figcaption><\/figure>\r\n\r\n<p>Here&#8217;s the code for that:<\/p>\r\n\r\n<pre><code>&lt;figure&gt;\r\n&lt;blockquote&gt;&lt;p&gt;&lt;code&gt;&amp;lt;small&amp;gt;&amp;lt;a rel=&quot;license&quot; href=&quot;http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/&quot;&amp;gt;Creative Commons Attribution Share-alike license&amp;lt;\/a&amp;gt;&amp;lt;\/small&amp;gt;&lt;\/code&gt;&lt;\/p&gt;&lt;\/blockquote&gt;\r\n&lt;figcaption&gt;Using &lt;code&gt;&amp;lt;small&amp;gt;&lt;\/code&gt; around a &lt;a href=\"http:\/\/creativecommons.org\/choose\/\" title=\"Choose a License\"&gt;Creative Commons license&lt;\/a&gt; link with &lt;code&gt;rel=\"license\"&lt;\/code&gt;&lt;\/figcaption&gt;\r\n&lt;\/figure&gt;<\/code><\/pre>\r\n\r\n<h3>Differences between <code>&lt;figure&gt;<\/code> and <code>&lt;aside&gt;<\/code><\/h3>\r\n\r\n<p><a href=\"http:\/\/html5doctor.com\/aside-revisited\/\">We covered <code>&lt;aside&gt;<\/code> in an earlier article<\/a>, but it is important to note the difference between the two. You should choose between <code>&lt;aside&gt;<\/code> or <code>&lt;figure&gt;<\/code> by asking yourself if the content is essential to understanding the section:<\/p>\r\n\r\n<ul>\r\n  <li>If the content is simply related and not essential, use <code>&lt;aside&gt;<\/code>.<\/li>\r\n  <li>If the content is essential but its position in the flow of content isn\u2019t important, use <code>&lt;figure&gt;<\/code>.<\/li>\r\n<\/ul>\r\n\r\n<p>Having said that, if its position relates to previous and subsequent content, use a more appropriate element \u2014 e.g., a <code>&lt;div&gt;<\/code>, a plain old <code>&lt;img&gt;<\/code>, a <code>&lt;blockquote&gt;<\/code>, or possibly even <code>&lt;canvas&gt;<\/code>, depending on its content.<\/p>\r\n\r\n<h2>Don&#8217;t stop there!<\/h2>\r\n\r\n<p>No need to constrain your <code>&lt;figure&gt;<\/code>s to images and code examples. Other content suitable for use in <code>&lt;figure&gt;<\/code> includes audio, video, charts (perhaps using <code>&lt;canvas&gt;<\/code> or <code>&lt;svg&gt;<\/code>), poems, or tables of statistics.<\/p>\r\n\r\n<p>It may not always be appropriate to use the <code>&lt;figure&gt;<\/code> element, though. For example, a graphic banner should not be marked up with <code>&lt;figure&gt;<\/code>. Instead, simply use the <code>&lt;img&gt;<\/code> element.<\/p>\r\n\r\n<h2>Summary<\/h2>\r\n\r\n<p>As we&#8217;ve illustrated in this article, there are a lot of possibilities for the <code>&lt;figure&gt;<\/code> element. Just remember to make sure it&#8217;s the most appropriate element for the job. But you already do that for all your markup, right? :)<\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn&#8217;t have a way of semantically marking up this sort of content directly in our <abbr>HTML<\/abbr>, instead resorting to <abbr>CSS<\/abbr> class names. <abbr>HTML<\/abbr>5 hopes to solve that problem by introducing the <code>&lt;figure&gt;<\/code> and <code>&lt;figcaption&gt;<\/code> elements. Let&#8217;s explore!<\/p>","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[13,82,49,23,46],"_links":{"self":[{"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/posts\/1646"}],"collection":[{"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/comments?post=1646"}],"version-history":[{"count":26,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/posts\/1646\/revisions"}],"predecessor-version":[{"id":2032,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/posts\/1646\/revisions\/2032"}],"wp:attachment":[{"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/media?parent=1646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/categories?post=1646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/html5doctor.com\/wp-json\/wp\/v2\/tags?post=1646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}