demosthenes.info

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 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.

Virgin Gorda
Edge of Virgin Gorda

Captioning images in HTML5

html / images

Estimated reading time: 1 minute, 45 seconds

It appears that a great many developers have jumped on the HTML5 <figure> element and now wrap it around images with abandon, much as people who discover <div> for the first time tend to use it for everything(“Box all the things!”). This is incorrect: <figure> is not appropriate for all images.

The question to ask before using <figure> is:

“If I took this <figure> out of its current context and used it someplace else, would it explain itself?”

Note that <figure> may be applied to content other than : <video> and are both potential candidates for <figure>. But always, that central question remains. Logos and any kind of decorative image should not be used inside <figure>.

Bottom line: if you cannot pull the <figure> element and have it be self-explanatory on another page, you shouldn’t be using <figure> for the content. This usually implies that anything inside <figure> will have some sort of caption. Surprise: supports this with the <figcaption> element. So for this markup:

<figure>
<img src="paradise-pool.jpg" style="width: 100%; height: auto;">
<figcaption>Edge of Virgin Gorda</figcaption>
</figure>

The following CSS could be applied, assuming it is the only use of the element on the page / site:

figure, figure img { margin-bottom: 1rem; text-align: center; }

As they are an easily controlled block element, <figcaption> can be used for many purposes: they can be animated, even pushed into 3D.

figcaption? alt?

Developers are sometimes confused between the use of alt and <figcaption>. The easiest way to remember the role of each is:

  • alt is a description of the image: it's value should be written as if the user cannot see the image at all.
  • <figcaption> is a label for the content of the <figure>. This may be the same as the alt value, but is unlikely to be so.

In other words, paintings might be described and captioned this way:

<figure>
<img src="sunflowers-blue.jpg" alt="An oil painting of sunflowers with a royal blue background">
<img src="sunflowers-yellow.jpg" alt="An oil painting of sunflowers in bright yellow">
<figcaption>Sunflowers series, Vincent Van Gogh</figcaption>
</figure>

If alt and <figcaption> could be reasonably expected to be the same, alt should still be left in place, just set to a null value. (i.e. <img src="yellow-submarine.jpg" alt>).

Photograph is by the incredible Trey Ratcliff, liscensed under Creative Commons.

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.