. This is my blog, where I talk about web design and development with 
Pro CSS3 Animation, Apress, 2013
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 <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:
<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.
