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
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
Responsive image align center bootstrap 3

I do a catalog using Bootstrap 3. When displayed on tablets, the product images look ugly because of their small size (500x500) and a width of 767 pixels in the browser. I want to put the image in the center of the …

Read More