HTML5 figures and captions

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;
}

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.