The HTML5 Figure element

Of the "semantic elements" HTML5 supplies, the figure element is one that instantly hits the mark for me.

The figure element represents an image, optionally with a caption, that is self-contained thus being useful to annotate illustrations, diagrams, and photos.

The idea isn't new: HTML3 proposed a fig element but due to issues of backwards-compatibility and competing browser standards it never made it into the final HTML 3.2 specification.

The new semantics avoid this by being built to degrade gracefully.

For example, with the proposed HTML3 fig element, a browser that did not support that element would ignore the image completely so that you would get a caption with no image.

HTML5's figure element solves this by placing the figure's image in a standard img element, which will display even if the browser used has no knowledge of the figure element.

Pre-HTML5, the usual method to define an image along with a caption is to use a division elements, <div>. For example:

Although it serves the purpose, using these "faceless divs" always struck me as being rather ad-hoc. HTML5's figure element now suggests the content prior to any role assigned by CSS and provides a <figcaption> element in which to place the image's caption.

There, isn't that much more comprehensible. Thank you HTML5.

Update 10th March 2013

The figure element can support multiple images, but only a single caption. For example:

Recent/related stories:

Tags: HTML5.