Captioning an image [closed]

Question

What's the neatest way to caption images on the web using the latest in HTML/CSS? Demo code please.

Answer 1

There are several semantic ways to markup an image and its caption.

Old school way

An old school method is to use HTML definition lists, see Image captions the semantic way. (There are other nice tutorials demonstrating this method.)

<dl>
    <dt><img src="foo.jpg" /></dt>
    <dd>Foo</dd>
</dl>

Microformat

There is also a figure microformat which applies on any regular markup:

<div class="figure">
  <img class="image" src="foo.jpeg" alt="" /><br/>
  <small class="legend">Foo</small>
</div>

HTML5

And HTML5 now provides a clean straight method for images with captions through the <figure> and <figcaption> elements.

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>

Answer 2

I know I've seen a number of articles with some good code over at www.alistapart.com - but here's one to start you off: http://www.alistapart.com/articles/practicalcss/