The latest working draft of HTML5 proposes two new elements that seem particularly useful to me. These are the figure and figcaption elements. The element name’s are fairly self explanatory–the new elements are meant to let you markup figures and captions included in your documents.
On this blog, these new elements could be used in posts like Adding borders to data tables with CSS. Marking up the images used to illustrate that post as figures and adding the optional figcaption element makes perfect semantic sense.
The figure element also offers a semantic way to mark up illustrations, diagrams, photos, code listings, photos, videos, and other material. The W3C working draft describes figure as,
The
figureelement represents some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document.
Take a look at some example code showing a marked up image.
<figure>
<img src="table-borders.jpeg"
alt="A table with CSS borders added to the table element">
<figcaption>The default display of CSS borders on the table element</figcaption>
</figure>
The figure element is described as “flow content” within a document, however using the figure element allows for moving a referenced figure away from the primary content, e.g. to the side of the page, to dedicated pages, or to an appendix.