Dzone icon Reddit icon
Facebook icon RSS Icon Borrow my code


Feel free to borrow any code you like on this site for modification and use on your site. For support implementing just leave a comment for Cd&. You will also find Cd& providing answers and solutions on codingforums, Experts-Exchange, Digital Point, and other progressive Q/A sites where support is available. If there is a snippet you need for your web site, send a request to Cd&, and it might end up being made available on the site.

If you use code from a link would be appreciated.

If you have code on your site that might help other developers, you could add a Borrow button and join the movement to make good open source code easily accessible to all developers.

Captions For Lists and Images

Submitted by: COBOLdinosaur on 2012-11-29 14:04:08

Member Site:

One of the limits of using lists (ordered and unordered) is that they have no provision for a heading. You can do something like:
<ul>This is a Title<li> etc...</li>... </ul>
but it is invalid because the list containers can only contain List Items; a serious structural error. One commonly used format to put a heading on a list is to use a paragraph or semantically questionable h tag ahead of the list. It is messy and ugly, but it validates.

The problem with those solutions is that the elements are not bound to each other and therefore it can break unless you make it even uglier by putting a common wrapper around both elements for common styling, and then you have extra linefeeds to deal with. You can also use a div to contain both the heading and the list but that is semantically incorrect use of the div which is not intended to carry flow content like text.

There must be a better way. There is: <figure> and <figcaption> that can solve the problem; and several others as well; in some cases.

Common Uses For Lists

One of the most common uses for list is for menus. Menus generally do not need a heading; so there is no problem. Another use is for a list of links. Semantically that is an incorrect use of lists because the correct structure is to use <nav> to contain such lists. So that leaves general purpose lists where the list items contain flow content. That is where the figure element comes in. Semantically the purpose of the figure tag is to introduce and label items like images and content in pre tags. These are considered to be "figures" in publishing terms.

The standards explicitly recommend <figure> to contain images and pre, and imply that other elements that are illustrative or information blocks can be considered figures and therfore would be semantically correct inside a figure. WHATWG has created such a loose semantic definition with HTML5 (like the nonsense for datalist and the article/section relationship) that a list of general content can be considered a candidate for "figure". So it is not semantically incorrect to put those kinds of lists in a figure wrapper, which means the <figcaption> becomes a good solution to headings for lists and we can do this:

  • First Item
  • Second Item
  • Third Item

The code looks like this:

The figure and figcaption tags can be used to wrap any figure or illustration that needs a heading.... OR a title on the bottom like this:

  • First Item
  • Second Item
  • Third Item
THIS IS THE footer

The code looks like this:

You can do it both top and bottom, all contained in a single component, but even though it works; it will cause a validation error because the figure tag may not contain more than one figcaption:

  • First Item
  • Second Item
  • Third Item
This is an invalid 2nd caption

Just a little code:

Using Figure for Images

A nice way to use it is for images is like this:

this is an image

All that took was:

The nice part about it is that the caption is locked to the image. The figure can be positioned and styled and the caption can be rendered with any affect that can be applied to any other text element so you can do something like:

this is image one
this is image two
this is image three

The styling can go in a class or multiple classes so you can develop a set of image presentations across a site.

The format is quick and clean; and the code is valid. This kind of structure is not likely to get broken by some renegade hack done with jquery or some other trash generator that messes up the Document Object.

Got a special script or snippet? Author Guidelines

To comment on this snippet LOGIN or REGISTER FOR FREE

Not a member of COBOLdinosaur yet? FREE registration takes less than a minute