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

css html image caption
Bradz picture Bradz · May 17, 2013 · Viewed 22.6k times · Source

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?

Answer

Duncan Beattie picture Duncan Beattie · May 17, 2013

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

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

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

Related questions

Image caption width to same as image

How can I make image caption width same as image? Now I have the following code: <div class="image"> <img src="foo.jpg" alt="" /> <div>This is the caption.</div> </div&…

Read More
Stacking two pictures with captions side by side and centered in Wordpress

this is driving me absolutely nuts. I'm not the most experienced with CSS, so I'm hoping it is something simple. I'm running Wordpress 2.9.2 with "The Morning After" theme. I am trying to write a post where I want to display …

Read More
How do I auto-resize an image to fit a 'div' container?

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio? Example: stackoverflow.com - when an image is inserted onto the editor panel and the image …

Read More