The good old HTML img
element has not been forgot by the HTML5 implementors who actually enhanced it with two new semantic elements, namely figure
and figcaption
. The former is a container for images, while the latter is the actual caption provided to the image itself. It's worth saying that the figure
element accepts only inline elements as its children, so if you were accustomed to get the final result of an image with caption by using nested divs or other block-level elements, it's time to radically rethink your coding style.
wink
Before HTML5, we were used to write:
<div class="figure"> <img /> <div class="caption">...</div> </div>
Instead, now we can simply write:
<figure> <img /> <figcaption>...</figcaption> </figure>
At the time of this writing, browser support is completely lacking. So if you want to use these elements, you should add the following CSS rule to your style sheet:
figure, figcaption { display: block; }