What is the correct way to add caption to an image using html5

Question

I am trying to work out the correct way to display a caption with an image, something like here makes sense jfiddle link but i am also looking at figure and figcaption which appears to serve the purpose better and I prefer ie:

<figure>
<img src="/animage.jpg" alt="an image">
<figcaption>This is the caption</figcaption>
</figure>

I am building a template for a blog news post so does either way matter or is there a correct use for figcaption that im missing?

Gond

I would go with the above option - html5doctor.com/the-figure-figcaption-elements – Tiffany

thanks Pete, I agree, there doesnt seem to be any other standard way of doing this i know of. – Gond

Answer 1

I would use the <figure> method as it has more semantic meaning than the div / span example.

<figure class="image">
  <img src="http://[..]" />
  <figcaption>I am an image caption</figcaption>
</figure>

http://jsfiddle.net/duncan/KYTWS/

related, although about blockquotes, http://alistapart.com/blog/post/more-thoughts-about-blockquotes-than-are-strictly-required

Nahuatlan

"Usually a <figure> is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow." That's not generally true for all images. If the image must appear at a particular place in the text, it should be a <figure>. – Turbellarian

Answer 2

I would also Suggest use element to show appropriate caption to Image. Click here to see demo.

For more options to add caption to image visit http://jkorpela.fi/www/captions.html

Sloth