The figure & figcaption elements

by .

In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the <figure> and <figcaption> elements. Let’s explore!

The <figure> element

The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <figure>:

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’s meaning.

The <figcaption> element

The <figcaption> element has been the subject of much debate. The spec initially wanted to repurpose <legend> rather than introduce a new element. Other suggestions included <label>, <caption>, <p> or the <h1><h6> elements. <legend> was changed, so we then used a combination of <dt> and <dd> inside <figure> at Jeremy’s suggestion. Most of these suggestions failed since there was no backwards compatibility for styling with CSS.

Regular readers will know that a new element was recently introduced, namely <figcaption>. Who knows if it’ll stick, but for now here’s what the spec says about <figcaption>:

The figcaption element represents a caption or legend for a figure.

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>).

Using <figure> and <figcaption>

So we’ve seen what the spec says about these elements. How do we use them? Let’s look at some examples.

Figure with an image

An image within a <figure> element without a caption:

Baby Orang Utan hanging from a rope

Here’s the code for that:

<figure>
  <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
</figure>

Figure with an image and caption

An image within a <figure> element with an explanatory caption:

Macaque in the trees
A cheeky macaque, Lower Kintaganban River, Borneo. Original by Richard Clark

and the code that we used:

<figure>
  <img src="/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/">Richard Clark</a></figcaption>
</figure>

A figure with multiple images

Nesting multiple images within one <figure> element with a single caption:

KooaburraPelican stood on the beachCheeky looking Rainbow Lorikeet
Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet.
Originals by Richard Clark

The code:

<figure>
  <img src="/kookaburra.jpg" alt="Kooaburra">
  <img src="/pelican.jpg" alt="Pelican stood on the beach">
  <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

Figure with a code block

The <figure> element may also be used for code examples:

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

Using <small> around a Creative Commons license link with rel="license"

Here’s the code for that:

<figure>
<blockquote><p><code>&lt;small&gt;&lt;a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"&gt;Creative Commons Attribution Share-alike license&lt;/a&gt;&lt;/small&gt;</code></p></blockquote>
<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>

Differences between <figure> and <aside>

We covered <aside> in an earlier article, but it is important to note the difference between the two. You should choose between <aside> or <figure> by asking yourself if the content is essential to understanding the section:

  • If the content is simply related and not essential, use <aside>.
  • If the content is essential but its position in the flow of content isn’t important, use <figure>.

Having said that, if its position relates to previous and subsequent content, use a more appropriate element — e.g., a <div>, a plain old <img>, a <blockquote>, or possibly even <canvas>, depending on its content.

Don’t stop there!

No need to constrain your <figure>s to images and code examples. Other content suitable for use in <figure> includes audio, video, charts (perhaps using <canvas> or <svg>), poems, or tables of statistics.

It may not always be appropriate to use the <figure> element, though. For example, a graphic banner should not be marked up with <figure>. Instead, simply use the <img> element.

Summary

As we’ve illustrated in this article, there are a lot of possibilities for the <figure> element. Just remember to make sure it’s the most appropriate element for the job. But you already do that for all your markup, right? :)

125 Responses on the article “The figure & figcaption elements”

  • […] The figure & figcaption elements | HTML5 Doctor […]

  • Cool stuff!

    Before I resorted to using a div->image with a div->caption nested inside to express these kind of structures. The figure element will remove the need for the somewhat silly image class. Definite improvement for quotes too.

    It does impose some extra difficulties with wysiwyg editors and such, as I would suggest using the figure element for every image that could have a caption (future-proof coding and such!).

    Love it!

  • John Faulds says:

    I would think, from an accessibility point of view, that for the second example, that you would leave the alt attribute blank because it’s essentially providing the same content as the figcaption – no need for people listening to the page, or browsing without images to get the same piece of content twice.

  • @John, good point yeah. I’ll try and check the guidelines on that.

  • Alohci says:

    For what it’s worth, I disagree with John Faulds. The caption should provide informationaugmenting the photograph. The alt should provide equivalent content to the photograph. For photographs like the second example, appropriate alt text is a description on what one can see in the photograph. They really shouldn’t amount to the same text, and indeed don’t in the actual example given.

  • John Faulds says:

    Regardless of whether the two in that example are actually the same, I’d still argue that the content of the alt attribute is redundant; the only piece of info contained in the alt that’s not in the caption is that it is in the trees. So if it’s not an issue of accessibility, it is one about good copywriting.

    But I also disagree that a caption’s sole purpose is to augment, rather it should describe first and then augment if required. I can think of lots of examples where the caption is simply describing, e.g. a headshot with the person’s name underneath – no augmentation there, and I believe the majority of captions won’t include any augmentation.

  • Harsha M V says:

    Thanks for this awesome post. just hoping every browser starts supporting html5 and people move into them. ;)

  • julien b. says:

    Completely agree with John Faulds. The alt should be filled if the redundancy between figcaption and alt can be avoided. There are plenty of examples where the captions are depicting a figure and where these textual informations are required for readers/viewers, even those with a regular browser (mean, not a screen reader). In those cases, the alt is often redundant with the (fig)caption.

    Alohci is right when he/she says that a visual description of the image is to be provided within the alt. This macaque is in a tree. Is he hiding in the leaves ? looking at a female ? eating sandwiches ? Which information must be provided in a alt attribute is a matter of scope, of overall meaning.

  • Bruce Lawson says:

    I’ve been having a similar debate with Hixie http://lists.w3.org/Archives/Public/public-html/2010Jun/0168.html

    I’ve been brought up nice, so don’t like to over-burden a user with “too much accessibility”. So I don’t think that having alt plus a caption that are pretty much the same helps anyone.

    It seems to me that the question should be “what’s better for the user?” and the answer is “it depends”, because those pesky blind users will insist on not being an homogenous mass.

    So some blind users will be fine to know that figure X is a picture of a monkey, or the CEO of Blammo Corp. Others will want to know whether the monkey is juvenile or mature, and what colour hair the CEO has.

    I favour brevity and reducing repeitiion. So, a picture of the CEO of Blammo Corp leveraging a synergy in a news piece *probably* doesn’t need alt text to tell us that he’s 55 years old, with brown hair, a pinstripe suit.

    But I might be a horrible fascist, chuckling as I place my foot on the throat of visually-impaired children; I lose track these days.

  • […] our article on the <figure> and <figcaption> elements for […]

  • One thing to keep in mind is that <figcaption> maps to ARIA’s aria-labelledby. The alt attribute maps to ARIA’s aria-describedby. While it’s sometimes a tricky distinction, an image’s alt text should describe the image (what it looks like, what you can see in it), whereas <figcaption> (and the image’s title attribute) should entitle the image (what it is, which is influenced by why you’re including it).

    …or at least that’s the impression I’ve got :)

  • Bruce Lawson says:

    Oli, you’re right. The question remains: does every image need description? In my opinion (and the opinion of some but not all blind friends), the answer is “no”.

  • I agree. The spec says “The intent is that replacing every image with the text of its alt attribute not change the meaning of the page,” and that’s a good rule of thumb.

    Here’s what I’ve got from the spec: if the image has a function, describe this function. If it provides useful information, then make sure that info is also accessible. If the image is purely decoration use alt="". If the image is described adequately in <figcaption> (such that adding alt text wouldn’t convey extra info, or would be repetitive), then alt="" is fine there too. But above all else think about how the page would read with images turned off, and make sure it reads well.

    Finally remember there’s no such thing as perfect accessibility, so just do the best you can.

    2010-06-16 edited for clarity

  • Alohci says:

    Oli, I think that’s just about spot on. And thanks Bruce for your thoughts.

  • bruce says:

    Oli said

    If the image is described adequately in (such that adding alt text wouldn’t convey extra info, or would be repetitive), then alt=”” is fine there too.

    My first thought. But apparently, alt=”” carries an implied ARIA role=”presentational” and, if the figure needs a caption it presumably isn’t presentational. So it should have no alt attribute at all, apparently.

    Not sure how I feel about that.

  • Alohci says:

    @Bruce. The problem with omitting the alt attribute altogether is , as I understand it, that AT will attempt to “repair” the missing alt text, which really isn’t what is wanted if the image is described adequately elsewhere on the page.

    I’m not wholly confident about WAI-ARIA roles yet, but couldn’t one do <img src=”…” alt=”” role=”img” > to override the implied role=”presentational”?

  • Christian Ready says:

    I noticed in your examples that the figures are preceded by paragraphs that introduce them. For example the line:

    Nesting multiple images within one <figure> element with a single caption:

    is then followed by a <figure> element. And yet the spec says that the <figure> is to be used for content that can be moved away into an appendix. Does the use of <figure> in this context meet that criteria?

  • @Christian — yes, as presumably the removed figure would be replaced by a link if done automatically. Also notice the word “can” — it is indeed content that could be moved. Ideally we’d be all literary-like and have (see Figure 1-12) and stuff, but hopefully you’ll forgive us for our lack of highfalootin’ ;-)

  • […] example check out this article about the new “figure” and “figcaption” […]

  • […] Figure 和 caption 元素 […]

  • Jenny says:

    question… I’m working through Bruce and Remy’s book, and I’ve come to this wonderful new structure, however it won’t seem to work. My visual Studio environment is allowing for and giving feedback on the figure tag, but not the figcaption element (which to me is the cool part of the whole thing). Chrome has been rendering all of the other things in the book delightfully, but not this. suggestions?

  • @Jenny — Check your source in Chrome (View > Developer > View Source) and make sure that figcaption is there. If it is try adding figcaption {display: block;}, or adding figcaption to the handful of HTML5 elements you declare as display: block. However I suspect that Visual Studio is the problem, so try a quick test in Notepad, and if so check for an update for Virtual Studio, or ask when they will add it.

    HTH

  • @Jenny, seems odd that you can use some new elements but not others. Personally I don’t use visual studio, but while the intellisense might not work so long as you’re losing Remy’s shiv every browser will ‘understand’ the new elements.

  • Jenny says:

    It was a good idea to add the element to the display:block section in my css, and I made sure to add the Sharp Shiv. Now it does show the text of the figcaption, though a bit disappointingly. Upon taking a closer look at the photo that Bruce’s mum snapped, I see that there is some css3 blingery involved. It looks good. Must be nice to be good looking AND talented!

  • @Jenny — Aah, if you haven’t added display:block yet you really should have:

    <style>
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
    </style>

    (From HTML5 Boilerplates)

    Also, while Bruce’s mum thanks you for complementing her photography, she apologies for the photo’s subject — sadly her son didn’t inherit her good looks ;)

  • Bruce Lawson says:

    I expect that it would be nice to be good-looking and talented. Or even to have just one of those two attributes.

  • Shelomo says:

    Would wrapping the site logo be an appropriate use?

    hidden tagline

  • Shelomo says:


    < figure>
    < img src="logo" />
    < figcaption> hidden tagline </figcaption>
    < /figure>

  • Rich Clark says:

    @Shelomo no, for that you should use the hgroup element or simply an image with text replacement. Figures are primarily for images/quotes/code etc that are referenced in the text.

  • Ramil says:

    How about avatars in comment, does it need to be in figure?

  • @Ramil — probably not, as in general just an image would be fine. If you wanted to have the commenter’s name in a <figcaption> then it’d work…

  • Karl says:

    I’m happy using figure in the context of your examples (images, code etc) but would I be pushing it to mark up links to documents where the front cover is the image and the book title is the caption (with one or both as links)? I ask because we have content authors who use tables to achieve a “gallery” of publications and I really want to eliminate this behaviour by incorporating it into a page edit screen. I’m pretty sure using a group of figures is fine (enclosed by <article> perhaps?) and would allow for a flexible CMS template gallery section (with regards to final content).

    Cheers and Happy New Year!

  • Rich Clark says:

    Hi Karl

    Figure is intended to be used for images/quotes/code samples etc that are referenced from a main article but can be moved away in the source.

    To answer your question, I wouldn’t really be using it for the page you describe (sounds similar to Amazon if I’ve interpreted correctly) each book could be within an article sure but I would just have a heading & image within that. E.g.

    [article]
    [a href=”fullpage.html”]
    [h2]Book Title[/h2]
    [img src=”mybook.png” alt=”Book title”]
    [p]Description[/p]
    [/a]
    [/article]

    Basically you’re not really referencing the image within the article so I wouldn’t use figure.

    If you’re unsure about which element to choose, try our flowchart.

    Rich

  • Karl says:

    Cheers Rich!

    My specific use case here is author-generated content with a list of closely-related documents for download. Traditionally, the author adds the documents to the “resource gallery” (to use a CMS term) and then links to them in an unordered list (if you’re lucky). Otherwise it’s a paragraph or line breaks per link. If the author has images of the front pages (the document is a pamphlet or report) they’ll create a table to layout the images and links which even if it’s a very simple structure can still cause problems for a screen reader (remembering that authors are not crafting raw HTML).

    I was thinking it would be clever to capture what downloads are associated to the content in the page edit screen and then get the template to put those documents into a consistent markup structure with the front page as an image. Happy with using <article> for this but wanted to explore “etc” from your flowchart (got it from @media, thx!) and this article.

    Regards, Karl

  • […] HTML5 ninjas, we know that we’ll hang any picture and a attendant heading within figure and figcaption elements – though what will we hang a whole organisation of outmost links […]

  • […] can read more about the <figure> and <figcaption> elements and see some examples on HTML Doctor’s […]

  • […] &#1089&#1072n read more &#1072b&#959&#965t th&#1077 <figure> &#1072nd <figcaption> elements &#1072nd see &#1109&#959m&#1077 examples &#959n HTML Doctor’s […]

  • […] can read more about the and elements and see some examples on HTML Doctor’s […]

  • […] Well now lets go through our html5 code. As you can see I have used figure tag which has an optional figcaption tag of html5 in my code which is very helpful for sematics. You can check detailed explanation of figure and figcaption on html5doctor. […]

  • pengkai says:

    figcaption can’t content with h1~h6 tags ?

  • Ron Evans says:

    Currently with XHTML 4.x and CSS 2.x In order to have a caption be right justified with an image (like the way your ‘Submit Comment’ button lines up with the right side of the ‘Enter Comment’ box) , the following conditions need to be met:

    1. The image&caption or containing box have to have a width property declared in a style sheet or inline.

    With the html5 ‘figure’ tag and figcaption tag is there any inherent capability in these tags that would allow image&caption alignment without having to meet criteria 1?

    If you have multiple sized images that you want centered in a containing element but want the caption to be right (or left) justified with the varying image sizes will you STILL have to have a width declared?

    Or a better question may be:
    Is the only inherent value of these new tags their allowance of more semantic mark up?

  • When I use and inside a column, it messes up the column – it either breaks it up or it reverts back to a column-ness page.

  • Chris says:

    Would you be creating any semantic faux pas by wrapping in a , or tag?

  • Chris says:

    Sorry…was meant to read:

    Would you be creating any semantic faux pas by wrapping figcaption in a ‘p’, ‘span’ or ‘div’ tag?

  • Ruslan says:

    What if I have list of special offers where each offer has an image, do I need to use figure?


    <ul>
    <li>
    <figure>
    <a href="#">
    <img src="#" alt="" />
    <figcaption>Offer Title</figcaption>
    </a>
    </figure>
    </li>
    </ul>

  • Kyle says:

    Is there a way to have multiple s with on one row? When ever I put the and around an image, it puts each image on its own line. I’d like to force it all to be in one line.

  • nathan says:

    Hey there Doc,

    Any idea if a figcaption can have nested elements? I tried searching google and they claim you’re the authority on the subject!

    I’m thinking

    [figure]
    [img]
    [figcaption]
    [h2]Title[/h2]
    [p]Some text.[/p]
    [/figure]

  • @Nathan — yep, the spec says “Content model: Flow content”, which is basically most elements, including <h1>-<h6> and <hgroup> etc.

  • Nathan Swartz says:

    Thanks Doc!!

  • Shawn says:

    Could figure and figcaption be correctly used to display a post thumbnail and the title and/or excerpt as the figcaption. For instance a portfolio page whereby an individual item would look something like the following:


    <figure>
    <img src="path/to/image" alt="">
    <figcaption>
    <h2>Title</h2>
    <p class="excerpt">Excerpt content here...</p>
    </figcaption>
    </figure>

    I am sure that this will work, but would it be correct semantically? Or is div – img – h2 – p a more appropriate solution?

  • nathan says:

    That’s what I’m wondering, too, Shawn. If other tags are allowed within the figcaption tag…not a lot of info on the web about that guy just yet.

  • @Shawn — sure, that’s valid (ref my reply to Nathan above), but if the images are your main content I think in this case not using <figure> is better. Remember the “can be moved away from the main flow of the document without affecting the document’s meaning” bit in the spec quote at the start of this article.

    For me <figure> is appropriate if a mobile browser could replace your <figure>s with a “See figure 3” etc link (to save on bandwidth), and the page still works.

  • […] code is a neat bit of HTML5, using the shim. One bit of interest was the use of the figure and figurecaption tags, which I haven’t seen used in a production environment […]

  • aurel says:

    just to get my head around it: what is the point of having an image inside a figure without giving it a caption.

  • binrui says:

    Thank you for your nice work!

  • Valerie Lynn says:

    Thank you for the explanation of figure and figcaption!

  • matt says:

    What if the image gallery is the main content? Will it still be valid to use figure? It seems very logical to do so, but is it (technically speaking) semantically correct?

  • I love that this code works. However, my issue is; I am placing images in a row and I can not for the life of me figure out how to give each image it’s own caption without misplacing the order of the images. Every time I try to add a caption to the other images in the row, after adding the caption to the first image, the next image will pop below the first:(

    Can anyone figure out what I need to do?

    Thank You All in advance:)

  • […] image is going to be contained within an HTML5 figure element, but wrapped directly by an anchor in order to link it with something (either a lightbox enlarged […]

  • Todd M. says:

    Thanks for this explanation, nice and easy.

  • Sergey says:

    I have a gallery page.
    Should I use figure for pictures that link to external pages?

    If yes, then which one is more correct:


    <figure>
    <a href>
    <img />
    <figcapture></figcapture>
    </a>
    </figure>

    or


    <a href>
    <figure>
    <img />
    <figcapture></figcapture>
    </figure>
    </a>

    Thanks in advance

  • bruce says:

    I don’t think it matters. I’d probably use the link inside the figure as I imagine it would be easier to style. Let us know how it goes!

  • Sergey says:

    Thanks for reply, bruce. I agree that styling may be easier with the link inside.. Probably you’re right and link should be inside the figure element in such cases.
    I just thought and got to conclusion that images in my gallery are the main content, so maybe it’s not correct to use figure at all.. Maybe it should be just:

    Image Title

  • Sergey says:

    Oops.. forgot to encode:

    <a href>
    <img />
    Image Title
    </a>

  • Alohci says:

    @Sergey – You’re probably right that you don’t need figure at all, but note that of your two options using figure, the first (link inside figure) is invalid in HTML5. figcaption (not figcapture) must be the direct child of figure.

  • Sergey says:

    @Alohci – that’s right! I didn’t think about it. Thanks!

  • bruce says:

    @alcohi thanks for pointing that out – I’d forgotten that figcaption must be the direct child of figure.

    I’m hanging up my stethoscope in shame.

  • It’s even more fun — “Contexts in which this element can be used: As the first or last child of a figure element”.

    @Sergey — Also, be careful with block-level links in Firefox <4 if the link’s first child is a new-in-HTML5 element… if you have enough FF3x users to worry about :)

  • Billy says:

    Re: Alt vs. figcaption:

    Using the “CEO of Blammo Corp” example.

    My vote’s for the alt saying something like “Mugshot”; the figcaption should then be “John Doe, CEO of Blammo Corp.”.

    The alt should describe what the photo is… Alt !== caption. :D

  • laeeq says:

    Many many thank you for the explanation of figure and figcaption!

  • Matth says:

    Jessica, by default your browser is rending the figure tag as a block-level element. To keep your images from dropping to their own line style the figure tag with display: inline-block.

  • hoko says:

    which one is correct?


    <figure>
    <a href="#">...</a>
    </figure>

    or


    <a href="#"><figure>
    ...
    </figure></a>

  • Bruce Lawson says:

    hoko, it depends. The first one makes one thing a link inside a figure. The second makes the whole figure a link.

  • hoko says:

    so, both are semantic?

  • Bruce Lawson says:

    hoko,

    Either may be correct but it’s impossible to know which is correct as I don’t know what your content is, or what you want to do

  • Is it right if I use figcaption outside the figure tag?

  • bruce says:

    vladimir – no. figcaption is to caption a figure, so it can’t be outside the figure.

  • Ahh I got. I supposed so – it loses the context other way – many thanks

  • Some of the article pages I’m designing for a project have an embedded photos gallery instead of a single photo – what’s the most semantic way to mark this up?


    <figure>
    <div class="gallery">
    <a href=""><img></a>
    <a href=""><img></a>
    </div>
    </figure>

    …or…


    <div class="gallery">
    <a href=""><figure><img></figure></a>
    <a href=""><figure><img></figure></a>
    </div>

  • Adam says:

    Thanks for the info. I wonder if fgcaption will survive the test of time.

  • Johan says:

    should pinterest.com’s blocks of images and captions then be in <figure> and <figcaption> tags?

  • Sergey says:

    @Johan, I think that they shouldn’t, because those units are the main content of the page. However I may be wrong so am also excited to hear opinions of others.

  • Johan says:

    @Sergey – or maybe they could be article tags?

  • Sergey says:

    @Johan, agree on article tags

  • Des Dugan says:

    I like the figure and figcaption, if for one reason, it lets me get the description underneath the figure. However, I can not find a way (without using CSS, to get the text to run around the by using or right? Any ideas?

  • […] am a big believer in semantic markup, so we will be using the HTML5 figure and figcaption tags for increased context. Even if none of your users are browsing with a screenreader or other assistive device, descriptive […]

  • Yes, the feature <figure> in html5 is great, but it seems that few sites and blogs are using, here in Brazil (where I live), for example, few, if not none, blogs and websites use this feature and think it should use more, I always use this tag on my blogs and projects, trying to make the site more semantic as possible.

  • Yannis says:

    I was going to ask about the same question as @Dinis Correia did. Does anybody know the answer?

  • Sebastian says:

    Well, the clearest example for me is simply thinking about math books and miscellaneous papers: in those, ecuations, theorems, code snippets and graphs, among others, are clearly defined and referenced several times throughout the document.

  • infralabs says:

    I am wondering is it proper to put wrapping divs for each of serveral thumbs inside the figure tag (like in the example code below)?

    http://stackoverflow.com/questions/16780525/wrapping-divs-inside-figure-tag

    Or is there any more appropriate/simpler way to combine both html5 semantics and good styling of thumbs img elements?

    Thank you in advance for any information.

  • Bryan Stanley says:

    Can there be a header/footer inside the figcaption?

  • Markess says:

    Is it possible to do 3 (or more) images side by side with different captions centered underneath each image and all center on the page?

    Thanks

  • Yes, just use 3 figure elements, each with a figcaption. Then use CSS to position them as you wish.

    R

  • Markess says:

    Ok thanks, but may I ask how is this any different then just using DIVS and setting the CSS as you said?

    Thank again

  • Newton says:

    What about for use with comments and/or a commenting system? Seems like they could be essential to the content, but position is unrelated.

  • Bobby says:

    Hi, one quick question. Inside figure element, is it allowed to do add other element like div?

    <figure>
    <img />
    <figcaption>

    </figcaption>
    <div>

    </div>
    </figure>

  • @Bobby: Generally speaking, “yes”, you can put most elements inside a figure element. But of course, you should do your best to respect the rules regarding what type of content is suitable to be put inside a figure element, as described in the spec:

    The figure element represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.

  • Bobby says:

    @Andreas, thank you for your reply.

    So basically I am building image gallery, each image has its own figure tag and social widget. I was about to put social widget inside figcaption but I’m sure social widget doesn’t belong in figcaption.

  • @Bobby: From the spec,

    Content model:
    Either: One figcaption element followed by flow content.
    Or: Flow content followed by one figcaption element.
    Or: Flow content.

    so apparently the figcaption element (if present) has to be the first or the last child of the figure element.

    That would make your example invalid.

    Anyhow, the spec. doesn’t say anything about UI controls (like your ‘social widgets’). It’s actually a very good question. Personally I feel that the requirement of the content model is a bit too strict (why only first or last?), and I don’t see any major reason not to allow UI controls if appropriate, like in your case.

    If you’re lucky, you might actually get a normative response here from Steve Faulkner, W3C HTML5 editor.

  • Bobby says:

    @Andreas, ah I see. I can tolerate about the figcaption position. With a little CSS will do the trick. Anyway your respond has enlighten me, Thanks!

  • Bobby: Just let me add this: the way the spec. is written at the moment, I think you should not add UI controls at all if you want to follow the spec. strictly. After all, as you say, it is semantically dubious to put them in the caption. But it is equally dubious to put them outside the caption, because

    The figcaption element represents a caption or legend for the rest of the contents of the figcaption element’s parent figure element, if any.

    so then the caption would also describe the UI controls…

    Personally, I am vey much into “hypertext documents” as opposed to “hypertext appliactions“, so I kind of like the strict semantics. Still, HTML5 is not only about documents, and even in documents, I can see the benefit of putting UI controls in a figure (show fullscreen, copy to clipboard, etc.), BUT I would prefer these to be features integrated in the browser.

    Anyhow, your example shows there might actually be an occasional need to add custom UI controls to a figure. To me, a new element like figcontrols would make sense, but I don’t think that will happen. So the question remains: what should you do? It is a good question, but I don’t think there is a perfect answer according to the current spec.

  • Novel says:

    How to display ‘figure’ elements side by side? without enclosing in any other elements. Please…

  • Table Saw Expert says:

    So this is nothing to be confused with in HTML. I thought it was alternate way to address images. But now you have made it clear that it has some uses in image gallery setup in a website.

  • Quickredfox says:

    Lets say I want to markup bird pictures each within a figure element, can I also include and audio tag of the bird’s call and If so, where? In the Caption?

  • Peter says:

    I find the concept of an image being ‘essential’ very vague. When is a picture essential?
    the more I think about it the more I get confused. Isn’t a picture always essential except when it is a filler or presentational (in which case they should be placed in a css background, not an img).
    Example: when writing a blogpost about a home project, placing a picture of the end result, is that an essential picture?
    I can guess the picture of a t-shirt on a webshop site is essential, but what about a picture of a usb-cable on the same site? Is it really essential to show a usb cable (most people know what it looks like and is not really essential to know what the product looks like). But if a t-shirt is essential and a usb-cable is not, then using figure seems arbitrary from a design point of view (think about standard product html templates). Then do I need one template for products with essential pictures and one without?
    I am getting a headache.

  • Bobby says:

    @peter, you can use <aside> for non essential pictures.

    If the content is simply related and not essential, use <aside>

  • Sean Walsh says:

    I know this is an old post and that much of discussion has passed but I wanted to chime in. John Faulds is wrong in a major way.

    To apply his rational to someone with sight the image is not necessary since we have the caption. That is 100% incorrect. The alt attribute and the figure should not have the same content. The alt attribute is almost always poorly written for screen readers providing bad UX. In example #2 it reads “Macaque in the trees.” It should read something like, “A Macaque monkey resting in the trees looking down through the foliage.” It should be very descriptive. It should be the auditory equivalent of the image. Then the caption gives you context by which the image should then be placed. In example two it gives us the location — something neither sighted nor the blind could tell, and the photographer.

    Don’t discount the blind just because the example, and just bout 100% of web sites, use alt incorrectly.

  • Gil says:

    Thanks you for the post. I didn’t know that HTML5 had builtin support for this!

  • […] classes or ids to give images with img tag their captions. In this tutorial we are going to use HTML5 figure and figcaption elements to give the image its caption and animate it using […]

  • Rares says:

    [sorry, I forgot about the special characters for brackets]

    Hi guys,

    Can someone tell me if the it is appropriate to use multiple <figure> tags in an image gallery and if the code below is correct:
    <section>
    <figure>
    <img />
    <figcaption>
    Image 1
    </figcaption>
    </figure>

    <figure>
    <img />
    <figcaption>
    Image 2
    </figcaption>
    </figure>

    <figure>
    <img />
    <figcaption>
    Image 3
    </figcaption>
    </figure>
    </section>

    So I have a html5 page, there is an article and there is a gallery, is the code above semantically correct?

    • So I have a html5 page, there is an article and there is a gallery, is the code above semantically correct?

      Yes. Note in HTML5:

      The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

  • Patanjali says:

    You introduced your figures with text like ‘An image within a element with an explanatory caption:’.

    This is my preferred way of introducing pictures, tables and lists, because it demonstrates the basic principle of context before content, so that the reader knows what to look for in the content, rather than being left up to their own predilections.

    I think that the table and list elements should allow a p element as an introduction, as can be done with the figure element.

    For a picture, the figcaption element presents an opportunity to put something like a quote, for a portrait, or some other aspect of the subject.

  • Leave a Reply to Oli Studholme

    Some HTML is ok

    You can use these tags:
    <a href="" title="">
    <abbr title="">
    <b>
    <blockquote cite="">
    <cite>
    <del datetime="">
    <em>
    <i>
    <q cite="">
    <strong>

    You can also use <code>, and remember to use &lt; and &gt; for brackets.