Как семантически добавить заголовок к списку

Это беспокоило меня какое-то время, и мне интересно, есть ли какой-либо консенсус относительно того, как это сделать правильно. Когда я использую список HTML, как мне семантически включить заголовок для списка?

Один из вариантов:

<h3>Fruits I Like:</h3>
<ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

, но семантически заголовок

явно не связан с

Другой вариант:

<ul>
    <li><h3>Fruits I Like:</h3></li>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

, но это кажется немного грязным, поскольку заголовок на самом деле не является одним из элементов списка.

Этот параметр не разрешен W3C:

<ul>
    <h3>Fruits I Like:</h3>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
</ul>

, поскольку

могут содержать только один или несколько

• Старый " заголовок списка " имеет наибольший смысл

  <ul>
      <lh>Fruits I Like:</lh>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
  </ul>
  

  , но, конечно, он официально не является частью HTML

  Я слышал, что предлагается использовать просто как форма:

  <ul>
      <label>Fruits I Like:</label>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Oranges</li>
  </ul>
  

  , но это немного странно и в любом случае не будет подтверждено.

  Легко увидеть семантические проблемы при попытке стилизовать заголовки моего списка, когда мне приходится помещать свои теги

  в первый

  и целевой их для стилизации примерно такими:

  ul li:first-of-type {
      list-style: none;
      margin-left: -1em;
      /*some other header styles*/
  }
  

  ужасы! Но, по крайней мере, таким образом я могу управлять всем

  , заголовком и всем остальным, задав стиль тега ul .

  Как правильно это сделать? Есть идеи?