A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members) or send an e-mail to admin@wiki.whatwg.org with your desired username and an explanation of the first edit you'd like to make. (Do not use this e-mail address for any other inquiries, as they will be ignored or politely declined.)

Note: This wiki is used to supplement, not replace, specification discussions. If you would like to request changes to existing specifications, please use IRC or a mailing list first.

Image Caption Examples

From WHATWG Wiki
Jump to: navigation, search

This page is a collection of sample usage for images with captions from around the web. Markup samples provided here have been reformatted and often simplified by removing presentational elements to better illustrate what "defines" the figure in them.

These real-world examples provides support for the Image Caption proposal.


Some images in the CSS 2.1 specification (example 1, example 2) use class names to add captions to figures. Reduced to a simpler form, the markup looks like this:

<div class="figure">
  <p><img src="..." alt="[caption text]">
  <p class="caption">[Caption Text]
</div>

(Note: Removed form this simplified markup is the [D] link to a long description that was put beside the image.)


Articles form the Salon.com magazine (example) use this markup for accompaniment photographs:

<div class='article_photo_right'>
<img src='...'><br />
<p class='article_photo_credit'>Photo: [Photograph's Name]</p>
<p class='article_photo_caption'>[Caption Text]</p>
</div>

MacWorld magazine website uses two-row tables to add a caption to screenshots in this article. Interestingly, they're not using the <caption> element with is meant to be used inside <table>. By using it, they could have saved themselves the trouble of specifying a width for each of their screenshots without having the image description extending the table. Here is a simplified version of the markup used on this page:

<table width="310" align="right">
<tr><td>
   <img src="...">
</td></tr>
<tr><td>
   <p>[Caption Text or Image Description]</p>
</td></tr>
</table>

Wikipedia thumbnail image with caption can be reduced to this once the links are removed:

<div class="thumb tright">
  <img src="..." alt="[Caption Text]" longdesc="..." />
  <div class="thumbcaption">
    [Caption Text]
  </div>
</div>

Some documents (example) simply put the caption text inside the image.

Other Examples

http://developer.apple.com/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_paths/chapter_4_section_2.html

<div>
  <a name="..." title="[Caption Text]"></a>
  <p>[Caption Text]</p>
  <img src="..." alt="[Caption Text]">
</div>

http://medicine.plosjournals.org/perlserv?request=get-document&doi=10.1371/journal.pmed.0020228

<div class="figureFM">
  <a name="..." id="..."></a>
  <img src="..."/>
  <h5>[Caption Text]</h5>
</div>

http://www.darsie.net/string/

<table WIDTH="346">
<tr><td>
  <img align=top src="..." ALT="Photo of Position 1">
</td></tr>
<tr><td>
  Position 1
</td></tr>
</table>

Mailing List References