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

CSSslidy: an auto-generated #RWD image slider. 1.5K 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, 12 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 images: <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="max-width: 100%">
<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; }

(The photograph is by the incredible Trey Ratcliff.

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.