Cómo agregar semánticamente un encabezado a una lista

Esto me ha estado molestando por un tiempo y me pregunto si hay algún consenso sobre cómo hacerlo correctamente. Cuando estoy usando una lista HTML, ¿cómo incluyo semánticamente un encabezado para la lista?

Una opción es esta:

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

pero semánticamente el <h3>encabezado no está explícitamente asociado con el<ul>

Otra opción es esta:

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

pero esto parece un poco sucio, ya que el título no es realmente uno de los elementos de la lista.

Esta opción no está permitida por el W3C:

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

como <ul>'s sólo pueden contener uno o más <li>' s

El antiguo "título de lista" <lh>tiene más sentido

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

pero, por supuesto, no forma parte oficialmente de HTML

Escuché que sugirió que usemos <label>como un formulario:

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

pero esto es un poco extraño y no se validará de todos modos.

Es fácil ver los problemas semánticos al intentar diseñar los encabezados de mi lista, donde termino necesitando poner mis <h3>etiquetas dentro de la primera <li>y apuntar a ellas para diseñar con algo como:

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

horrores! Pero al menos de esta manera puedo controlar todo <ul>, el encabezado y todo, diseñando la uletiqueta.

¿Cuál es la forma correcta de hacer esto? ¿Algunas ideas?

Como ya ha dicho Felipe Alsacreations, la primera opción está bien.

Si desea asegurarse de que nada debajo de la lista se interprete como perteneciente al encabezado, para eso son exactamente los elementos de contenido de secciones de HTML5. Entonces, por ejemplo, podrías hacer

<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. -->

En este caso, usaría una lista de definiciones de la siguiente manera:

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

Tu primera opción es la buena. Es la menos problemática y ya ha encontrado las razones correctas por las que no puede usar las otras opciones.

Por cierto, su encabezado ESTÁ asociado explícitamente con <ul>: ¡está justo antes de la lista! ;)

editar: Steve Faulkner, uno de los editores de W3C HTML5 y 5.1 ha esbozado una definición de un ltelemento . Es un borrador no oficial que discutirá para HTML 5.2, nada más todavía.

un <div> es una división lógica en su contenido, semánticamente esta sería mi primera opción si quisiera agrupar el encabezado con la lista:

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

entonces puede usar el siguiente CSS para diseñar todo junto como una unidad

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

También puede usar el <figure>elemento para vincular un encabezado a su lista como este:

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

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

Intente definir una nueva clase, ulheader, en css. p.ulheader ~ ul selecciona todo lo que sigue inmediatamente a My Header

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

Según w3.org (tenga en cuenta que este enlace está en el borrador de la especificación HTML 3.0 caducado hace mucho tiempo ):

Una lista desordenada suele ser una lista de elementos con viñetas. HTML 3.0 le brinda la capacidad de personalizar las viñetas, prescindir de las viñetas y ajustar los elementos de la lista horizontal o verticalmente para listas de varias columnas.

La etiqueta de la lista de apertura debe ser <UL>. Le sigue un encabezado de lista opcional ( <LH>título </LH>) y luego el primer elemento de lista ( <LI>). Por ejemplo:

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

que podría representarse como:

Fruta de mesa

• manzanas
• naranjas
• plátanos

Nota: Algunos documentos heredados pueden incluir encabezados o texto sin formato antes del primer elemento LI. Se recomienda a los implementadores de agentes de usuario HTML 3.0 que tengan en cuenta esta posibilidad para manejar documentos heredados mal formados.

Pongo el título dentro de la ul. No hay ninguna regla que diga que UL debe contener solo elementos LI.