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:
The following CSS could be applied, assuming it is the only use of the element on the page / site:
(The photograph is by the incredible TSO, a Norwegian videographer who is currently on a world tour in the creation of his own movie).