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

html, html-lists, semantic-markup

Solution

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); }`).

Problem

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?

Original source