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:
- <figure>
- <img src=paradise-pool.jpg style="height: 333px;" />
- <figcaption>Paradise Pool, Dominica</figcaption>
- </figure>
The following CSS could be applied, assuming it is the only use of the element on the page / site:
- figure { float: left; margin-right: 2rem; margin-left: 0; }
- figure, figure img { width: 500px; margin-bottom: 1rem; }
- 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).