I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Image Captions In XHTML

html / images

Estimated reading time: 2 minutes, 43 seconds

Captioned Image Example ScreenshotWhile there are many possible different methods for captioning an image, the solution I prefer in XHTML is to place the image in a definition list. This makes the most sense semantically – the image is the item we are defining, while the definition term is the caption – and is the most flexible in terms of markup. Note that the approach in HTML5 is very different, the latter language having markup explicitly designed for the purpose of captioning images.

A typical XHTML code example would be:

<dl id="captioned-image">
<dt><img src="khufu-pyramid.jpg" alt="Great Pyramid of Giza"  /></dt>
<dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>

While this accomplishes our goal of a captioned image, it doesn’t look terribly good. First, let’s put a border on the definition list:

dl#captioned-image { border: 1px solid black; }

Note that this border makes it clear that our definition list takes up the entire horizontal space of our web page, which makes sense, as <dl> is a block tag. The height of the <dl> is determined by the content inside the list. Now let’s float it:

dl#captioned-image { border: 1px solid black; float: right; }

Note that when we float a block element it essentially collapses: now the width of our definition list is determined by the widest element it contains (the image).

We’ll add a little padding, margin-left and background-color; you could also remove the border at this stage:

dl#captioned-image { border: 1px solid black; float: right; padding: 1em; margin-left: 1em; background-color: #ffc; }

The <dt> content is indented because that is the default for that element, just as it is for <li> elements, so let’s remove that with a separate style declaration:

dl#captioned-image dd { padding-left: 0; }

At the same time, we’ll improve a few things about the caption:

dl#captioned-image dd { padding-left: 0; text-align: centre; font-style: italic; }

Now the captioned image can have content wrapped around it. However, unlike an image by itself, it cannot be placed inside a paragraph:

<dl id="captioned-image">
<dt><img src="khufu-pyramid.jpg" alt="Great Pyramid of Giza" style="max-width: 100%; height: auto;" />
<dd>The Great Pyramid of Giza, completed ~ 2560 BCE</dd>
<p>Common knowledge (and Cecil B deMille films) imagines rows of sweating, beaten slaves building the pyramids. Archeologically, there is no evidence for this; indeed, all the available evidence shows that the workers were local men, hired to work off taxes owed to the Pharaoh by completing labour during the Egyptian wet season, when the Nile was flooded and no farming could take place.</p>
<p>In addition, the gangs of workers were significantly smaller than those shown in cinematic recreations: it has been estimated that it would take only 2,000 men working full-time to erect the Great Pyramid in the 10 years stated for its construction. Even taking into account support staff and rotation of workers, the entire workforce was probably no more than 10,000 people at any one time, lower by an order of magnitude than the 100,000 slaves Herodotus reported in his <cite>Histories</cite>.</p>

While we have used this list to contain a single example, you could have multiple pairs of images and captions as definition terms and matching declarations in the same list.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.