24

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?

Bradz
  • 271
  • 1
  • 3
  • 6
  • 2
    I would go with the above option - http://html5doctor.com/the-figure-figcaption-elements/ – Pete May 17 '13 at 09:24
  • thanks Pete, I agree, there doesnt seem to be any other standard way of doing this i know of. – Bradz May 17 '13 at 09:46

2 Answers2

19

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

Gajus
  • 69,002
  • 70
  • 275
  • 438
Duncan Beattie
  • 2,306
  • 17
  • 17
  • "Usually a `
    ` 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 `
    `.
     – Florian Walther Aug 14 '22 at 09:41
0

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

Sagar Shinde
  • 150
  • 10