Captions in HTML5

As more and more browsers begin to support HTML5 and its elements, one of the nice things we can all begin using is the <figcaption> tag. When coupled together with the new <figure> tag, the <figcaption> tag semantically connects a caption with an illustration (not necessarily an image illustration; it can be a text illustration).

Essentially, the <figure> and <figcaption> tags work together in almost exactly the same way the <fieldset> and <legend> tags work together. However, the <figure> and <figcaption> tags do not have any default styles applied to them (<fieldset> generally has a default inset border around it, and <legend> normally has a negative top margin applied).

The <figcaption> tag is a block-level element, and is treated as such in IE9, Firefox 4 and all recent versions of Chrome and Safari. Because it is an HTML5 element, it is not supported (without a JavaScript work-around like the HTML5 Shiv) in Internet Explorer 8 or earlier. Also, in Firefox 3.x, the <figcaption> element is treated as an inline element rather than block.

You can read more about the <figure> and <figcaption> elements and see some examples on HTML Doctor’s website.