Image Caption Examples

2007-07-13T11:53:16Z

MxoRto:

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 ([http://www.w3.org/TR/CSS21/colors.html#img-bg-repeat example 1], [http://www.w3.org/TR/CSS21/tables.html#img-cell-align example 2]) use class names to add captions to figures. Reduced to a simpler form, the markup looks like this:

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

(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 ([http://www.salon.com/opinion/blumenthal/2006/11/16/baker_rescue/index_np.html example]) use this markup for accompaniment photographs:

<pre>
<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>
</pre>

----

MacWorld magazine website uses two-row tables to add a caption to screenshots in [http://www.macworld.com/2006/06/firstlooks/flciviv/index.php this article]. Interestingly, they're not using the

WHATWG Wiki - User contributions [en]

Image Caption Examples