What is the best practice for provding a caption, title or label for a list in HTML?

Question

What is the best way to provide a caption for an HTML list? E.g

Fuit

• Apple
• Pear
• Orange

How should the word "fruit" be handled, particularly if I want it to be semantically associated with the list itself?

Answer 1

There is no caption-like tag for a list like a table has. So I'd just give it an <Hx> (x depending on your previously used headers).

Answer 2

While there is no caption or heading element structuring your markup effectively can have the same affect. Here are some suggestions:

Nested List

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

Heading Prior to List

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

Definition List

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Answer 3

As far as I know, there are no provisions in current HTML specs for providing a caption for a list, as there are with tables. I'd stay with using either a classed paragraph, or a header tag for now.

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

In the future, when HTML5 gains wider adoption, you will be able to use the <legend> and <figure> tags to accomplish this slightly more semantically.

See this post on the W3C mailing list for more information.