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... but it is invalid because the list containers can only contain List Items. One way commonly used to put a heading on a list is to put a paragraph or div ahead of the list. It is messy and ugly, but it validates.

The problem with that solution 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, and then you have extra linefeeds to deal with.

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

  • First Item
  • Second Item
  • Third Item

The code looks like this:

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

  • First Item
  • Second Item
  • Third Item
THIS IS THE footer
*** Normally styling should be in a stylesheet, but to make things easier to follow I have put the properties inline for the code displays on the page.

The code looks like this:

If you want you can do it both top and bottom, all contained in a single component, however you will generate a validation error because the figure tag may not contain more than one figcaption:

  • First Item
  • Second Item
  • Third Item
This is a left aligned footer

Just a little code:

A nice way to use it is for images 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 thing 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