What would be the best method to code heading/title for ul or ol, Like we have caption in table?

Though this is old, I’m updating it for others who might find this question when searching later.

@Matt Kelliher:

Using the css :before and a data-* attribute for the list is a great idea, but can be modified slightly to be more handicap accessible as well:

HTML:

<ul aria-label="Vehicle Models Available:"> 
    <li>Dodge Shadow</li>
    <li>Ford Focus</li>
    <li>Chevy Lumina</li>
</ul>

CSS:

ul:before{
    content:attr(aria-label);
    font-size:120%;
    font-weight:bold;
    margin-left:-15px;
}

This will make a list with the “header” pseudo element above it with text set to the value in the aria-label attribute. You can then easily style it to your needs.

The benefit of this over using a data-* attribute is that aria-label will be read off by screen readers as a “label” for the list, which is semantically correct for your intended use of this data.

Note: IE8 supports :before attributes, but must use the single colon version (and must have a valid doctype defined). IE7 does not support :before, but Modernizer or Selectivizr should fix that issue for you. All modern browsers support the older :before syntax, but prefer that the ::before syntax be used. Generally the best way to handle this is to have an external stylesheet for IE7/8 that uses the old format and a general stylesheet using the new format, but in practice, most just use the old single colon format since it is still 100% cross browser, even if not technically valid for CSS3.