It appears that a great many developers have jumped on HTML5’s <figure> 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.

Essentially, 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 <svg> 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: HTML5 supports this with the <figcaption> element. So for this markup:

1. <figure>
2. <img src=paradise-pool.jpg style="height: 333px;" />
3. <figcaption>Paradise Pool, Dominica</figcaption>
4. </figure>

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

1. figure { float: left; margin-right: 2rem; margin-left: 0; }
2. figure, figure img { width: 500px; margin-bottom: 1rem; }
3. figcaption { text-align: centre; }

(The photograph is by the incredible TSO, a Norwegian videographer who is currently on a world tour in the creation of his own movie).