Submitted by: COBOLdinosaur on 2012-11-29 14:04:08
Member Site: http://COBOLdinosaur.com
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:
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:
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:
Just a little code:
Using Figure for Images
A nice way to use it is for images is like this:
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:
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.