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 completly 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 one is, as with most of the semantic elements HTML5 supplies, to use div elements. For example:

<div class="figure">
  <img src="pic.png" />
  <div class="caption">Caption here.</div>
</div>

Although these div elements are assigned an id or class to distinguish and outline their purpose, using these "faceless divs" always struck me as being rather ad-hoc. Now, the use of the element alone suggests the content prior to any role assigned by CSS.

<figure>
  <img src="pic.png">
   <figcaption>Caption here.</figcaption>
</figure>

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

Tags: element, figure, HTML5, tag