Jon P Jon P - 1 month ago 13
HTML Question

Best practice for providing a caption, title or label for a list in HTML

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

Fruit


  • Apple

  • Pear

  • Orange



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

Answer

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>