The latest working draft of HTML5 proposes two new elements that seem particularly useful to me. These are the
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.
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
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.
alt="A table with CSS borders added to the table element">
<figcaption>The default display of CSS borders on the table element</figcaption>
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.