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

While there is no caption or heading element structuring your markup effectively can have the same effect. 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>

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.

To ensure screen readers connect the list to an associated heading, you could use aria-labelledby connected to a heading with an id like so:

<h3 id="fruit-id">Fruit</h3>

<ul aria-labelledby="fruit-id">
  <li>Apple</li>
  <li>Pear</li>
  <li>Orange</li>
</ul>

As noted in a previous answer, make sure your heading level follows heading order in your document.

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).

I know this is old but wanted to add the answer that I found for future people: https://www.w3.org/MarkUp/html3/listheader.html

use the <lh> element:

<ul>
  <lh>Types of fruit:</lh>
  <li>Apple</li>
  <li>Orange</li>
  <li>Grape</li>
</ul>

Since I was trying to find a solution with older browser support, I have what might be an over-simplified solution. Using table display styles and ids/classes:

    <ul>
        <li id="listCaption">My List</li>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>

Then apply the display: table-row; style to the element in CSS:

    li#listCaption {
      display: table-row;
      font-size: larger;
      text-decoration: underline; }

This works much better if you are using a description list, which is what I was doing when I had the same question. In that case, you can use <div> in the HTML and display: table-caption; in CSS, as div elements are supported within the dl list:

    <dl>
        <div id="caption">Table Caption</div>
        <dt>term</dt>
        <dd>definition</dd>
    </dl>

In CSS you can apply various styles to the caption:

    #caption {
        display: table-caption;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        background: transparent;
        caption-side: top;
        text-align: center; }

I should note that table-caption does not work as well in ul/ol as it is treated as a block element and the text will be aligned vertically, which you probably don't want.

I tested this in both Firefox and Chrome.

You can always use <label/> to associate label to your list element:

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>