How to semantically provide a caption, title or label for a list in HTML

What is the proper way to provide a semantic caption for an HTML list? For example, the following list has a "title"/"caption".

Fruit

• Apple
• Pear
• Orange

How should the word "fruit" be handled, in a such way that it is semantically associated with the list itself?

Option 1

HTML5 has the figure and figcaption elements, which I find work quite nicely.

Example:

<figure>
  <figcaption>Fruit</figcaption>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
</figure>

These are then easily styled with CSS.

Option 2

Using CSS3's ::before pseudo-element can be a nice solution:

ul[title]::before {
  content: attr(title);
  /* then add some nice styling as needed, eg: */
  display: block;
  font-weight: bold;
  padding: 4px;
}

<ul title="Fruit">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

You can, of course, use a different selector than ul[title]; for example, you could add a 'title-as-header' class and use ul.title-as-header::before instead, or whatever you need.

This does have the side effect of giving you a tooltip for the whole list. If you don't want such a tooltip, you could use the aria-label attribute instead (e.g., <ul aria-label="fruit"> and ul[aria-label]::before { content: attr(aria-label); }).