Search:
Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords
(e.g. turn on to find exact phrase “Lindsay Lohan leak” rather than pages featuring “Lindsay”, “Lohan”, and “leak” within but not necessarily exact phrase).

The HTML5 Figure element

22nd Dec 2011

Page: prev. | 1 | next

The fuller Figure
The figure element—perfect for the fuller figure.

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:

Line
  1. <div class="figure">
  2.   <img src="pic.png" />
  3.   <div class="caption">Caption here.</div>
  4. </div>

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.

Line
  1. <figure>
  2.   <img src="pic.png" />
  3.   <figcaption>Caption here.</figcaption>
  4. </figure>

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:

Line
  1. <figure>
  2.   <img src="pic1.png"/ >
  3.   <img src="pic2.png" />
  4.   <img src="pic3.png" />
  5.   <figcaption>Caption here.</figcaption>
  6. </figure>

Recent/related stories:

HTML5Shiv for HTML5 support for IE < 9
Forcing the figcaption element to wrap to the width of image

Page: prev. | 1 | next

Tags: HTML5.

Disclaimer:

Illustrations, paintings, and cartoons featuring caricatured celebrities are intended purely as parody and fantasised depictions often relating to a particular news story, and often parodying said story and the media and pop cultural representation of said celebrity as much as anything else. Who am I really satirising? Read more.

Privacy policy

No cookies, ad and tracker free. Read more.