Come aggiungere semanticamente un'intestazione a un elenco

Questo mi ha infastidito per un po 'e mi chiedo se ci sia consenso su come farlo correttamente. Quando utilizzo un elenco HTML, come faccio a includere semanticamente un'intestazione per l'elenco?

Un'opzione è questa:

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

ma semanticamente il <h3>titolo non è esplicitamente associato al<ul>

Un'altra opzione è questa:

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

ma questo sembra un po 'sporco, poiché l'intestazione non è proprio uno degli elementi dell'elenco.

Questa opzione non è consentita dal W3C:

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

come <ul>'s possono contenere solo una o più <li>' s

La vecchia "intestazione della lista" <lh>ha più senso

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

ma ovviamente non fa ufficialmente parte dell'HTML

Ho sentito suggerire che usiamo <label>proprio come un modulo:

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

ma questo è un po 'strano e non sarà comunque valido.

È facile vedere i problemi semantici quando provo a modellare le intestazioni della mia lista, dove finisco per aver bisogno di inserire i miei <h3>tag nei primi <li>e indirizzarli per lo stile con qualcosa come:

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

orrori! Ma almeno in questo modo posso controllare l'intero <ul>, titolo e tutto, applicando uno stile al ultag.

Qual è il modo corretto per farlo? Qualche idea?

Come ha già detto Felipe Alsacreations, la prima opzione va bene.

Se vuoi assicurarti che nulla sotto l'elenco venga interpretato come appartenente all'intestazione, è esattamente a questo che servono gli elementi di contenuto di sezionamento HTML5. Quindi, per esempio, potresti farlo

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

In questo caso, utilizzerei un elenco di definizioni in questo modo:

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

La tua prima opzione è quella buona. È il meno problematico e hai già trovato i motivi corretti per cui non puoi utilizzare le altre opzioni.

A proposito, la tua intestazione È esplicitamente associata a <ul>: è proprio prima dell'elenco! ;)

modifica: Steve Faulkner, uno degli editori di W3C HTML5 e 5.1 ha abbozzato una definizione di un ltelemento . Questa è una bozza non ufficiale che discuterà per HTML 5.2, niente di più ancora.

un <div> è una divisione logica nel tuo contenuto, semanticamente questa sarebbe la mia prima scelta se volessi raggruppare l'intestazione con l'elenco:

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

quindi puoi usare il seguente CSS per modellare tutto insieme come un'unica unità

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

Puoi anche usare l' <figure>elemento per collegare un'intestazione al tuo elenco in questo modo:

<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 (Esempio 162)

Prova a definire una nuova classe, ulheader, in css. p.ulheader ~ ul seleziona tutto ciò che segue immediatamente My Header

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

Secondo w3.org (nota che questo link si trova nella bozza delle specifiche HTML 3.0 scaduta da tempo ):

Un elenco non ordinato in genere è un elenco puntato di elementi. HTML 3.0 ti dà la possibilità di personalizzare i punti elenco, di fare a meno dei punti elenco e di disporre gli elementi dell'elenco orizzontalmente o verticalmente per gli elenchi a più colonne.

Il tag dell'elenco di apertura deve essere <UL>. È seguito da un'intestazione di elenco opzionale ( <LH>didascalia </LH>) e quindi dalla prima voce di elenco ( <LI>). Per esempio:

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

che potrebbe essere reso come:

Frutta da tavola

• mele
• arance
• banane

Nota: alcuni documenti precedenti possono includere intestazioni o testo normale prima del primo elemento LI. Si consiglia agli implementatori di programmi utente HTML 3.0 di provvedere a questa possibilità al fine di gestire documenti legacy formati male.

Ho inserito il titolo all'interno dell'ul. Non esiste una regola che dica che UL deve contenere solo elementi LI.