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.

Did you like this post? Get monthly summary of our new tutorials, posts and tips to your inbox!

No Responses

Post Your Comment

Your email address will not be published.