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

htmlhtml-listssemantic-markup

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?

Best Solution

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>