Image captions and wrapping

Something like this: http://jsfiddle.net/QLcRC/ ?

figure {
  display: table;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
}

<figure>
  <img src="https://picsum.photos/200/50" />
  <figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>

You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.

Shameless plug: I blogged about this problem and my solution here, if you're interested.

You may use also use the HTML5 figure and figcaption elements and style those as @Wasim suggested.

<figure>
    <img src="/test.jpg" alt="a test-image">
    <figcaption>Description</figcaption>
</figure>

Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:

#content img[title]:after {
    content: "[" counter(image) "] " attr(title);
    counter-increment: image;
    display: block;
    text-align: center; }