Como adicionar semanticamente título a uma lista

Isso tem me incomodado por um tempo e estou me perguntando se há algum consenso sobre como fazer isso da maneira correta. Quando estou usando uma lista HTML, como posso incluir semanticamente um cabeçalho para a lista?

Uma opção é esta:

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

mas semanticamente o <h3>título não está explicitamente associado ao<ul>

Outra opção é esta:

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

mas isso parece um pouco sujo, pois o título não é realmente um dos itens da lista.

Esta opção não é permitida pelo W3C:

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

as <ul>'s só podem conter um ou mais <li>' s

O antigo "cabeçalho da lista" <lh>faz mais sentido

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

mas é claro que não faz parte oficial do HTML

Já ouvi a sugestão de usar <label>como um formulário:

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

mas isso é um pouco estranho e não validará de qualquer maneira.

É fácil ver os problemas semânticos ao tentar estilizar os cabeçalhos da minha lista, onde acabo precisando colocar minhas <h3>tags dentro do primeiro <li>e direcioná-las para estilização com algo como:

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

horrores! Mas, pelo menos dessa forma, posso controlar o todo <ul>, título e tudo, estilizando a ultag.

Qual é a maneira correta de fazer isso? Alguma ideia?

Como já disse Felipe Alsacreations, a primeira opção é boa.

Se você quiser garantir que nada abaixo da lista seja interpretado como pertencente ao título, é exatamente para isso que servem os elementos de conteúdo de seccionamento HTML5. Então, por exemplo, você poderia fazer

<h2>About Fruits</h2>
<section>
  <h3>Fruits I Like:</h3>
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Oranges</li>
  </ul>
</section>
<!-- anything here is part of the "About Fruits" section but does not 
     belong to the "Fruits I Like" section. -->

Nesse caso, eu usaria uma lista de definições da seguinte forma:

<dl>
  <dt>Fruits I like:</dt>
  <dd>Apples</dd>
  <dd>Bananas</dd>
  <dd>Oranges</dd>
</dl>

Sua primeira opção é a boa. É o menos problemático e você já encontrou os motivos corretos pelos quais não poderia usar as outras opções.

A propósito, seu título ESTÁ explicitamente associado ao <ul>: está logo antes da lista! ;)

editar: Steve Faulkner, um dos editores do W3C HTML5 e 5.1 esboçou uma definição de um ltelemento . Esse é um rascunho não oficial que ele discutirá para HTML 5.2, nada mais ainda.

um <div> é uma divisão lógica em seu conteúdo, semanticamente esta seria minha primeira escolha se eu quisesse agrupar o título com a lista:

<div class="mydiv">
    <h3>The heading</h3>
    <ul>
       <li>item</li>
       <li>item</li>
       <li>item</li>
    </ul>
</div>

então você pode usar o seguinte css para estilizar tudo junto como uma unidade

.mydiv{}
.mydiv h3{}
.mydiv ul{}
.mydiv ul li{}
etc...

Você também pode usar o <figure>elemento para vincular um título à sua lista, como este:

<figure>
    <figcaption>My favorite fruits</figcaption>    
       <ul>
          <li>Banana</li>
          <li>Orange</li>
          <li>Chocolate</li>
       </ul>
</figure>

Fonte: https://www.w3.org/TR/2017/WD-html53-20171214/single-page.html#the-li-element (Exemplo 162)

Tente definir uma nova classe, ulheader, em css. p.ulheader ~ ul seleciona tudo o que segue imediatamente Meu cabeçalho

p.ulheader ~ ul {
   margin-top:0;
{
p.ulheader {
   margin-bottom;0;
}

De acordo com w3.org (observe que este link está na especificação HTML 3.0 de rascunho há muito expirada ):

Uma lista não ordenada normalmente é uma lista de itens com marcadores. O HTML 3.0 oferece a capacidade de personalizar os marcadores, dispensar marcadores e agrupar itens da lista horizontal ou verticalmente para listas com várias colunas.

A marca da lista de abertura deve ser <UL>. Ele é seguido por um cabeçalho de lista opcional ( <LH>legenda </LH>) e, em seguida, pelo primeiro item da lista ( <LI>). Por exemplo:

<UL>
  <LH>Table Fruit</LH>
  <LI>apples
  <LI>oranges
  <LI>bananas
</UL>

que pode ser processado como:

Fruta de mesa

• maçãs
• laranjas
• bananas

Nota: Alguns documentos legados podem incluir cabeçalhos ou texto simples antes do primeiro elemento LI. Os implementadores de agentes de usuário HTML 3.0 são aconselhados a cuidar dessa possibilidade, a fim de lidar com documentos legados mal formados.

Coloquei o cabeçalho dentro do ul. Não há nenhuma regra que diga que UL deve conter apenas elementos LI.