Comment ajouter sémantiquement un titre à une liste

Cela me dérange depuis un certain temps, et je me demande s'il existe un consensus sur la manière de procéder correctement. Lorsque j'utilise une liste HTML, comment puis-je inclure sémantiquement un en-tête pour la liste?

Une option est la suivante:

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

mais sémantiquement l'en- <h3>tête n'est pas explicitement associé au<ul>

Une autre option est la suivante:

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

mais cela semble un peu sale, car l'en-tête n'est pas vraiment l'un des éléments de la liste.

Cette option n'est pas autorisée par le W3C:

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

comme <ul>« s ne peuvent contenir un ou plusieurs <li>s »

L'ancien "en-tête de liste" <lh>est le plus logique

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

mais bien sûr, cela ne fait pas officiellement partie du HTML

J'ai entendu dire que nous <label>utilisions comme un formulaire:

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

mais c'est un peu étrange et ne validera pas de toute façon.

Il est facile de voir les problèmes sémantiques en essayant de styliser les en- têtes de ma liste, où je finis par avoir besoin de mettre mes <h3>balises dans le premier <li>et de les cibler pour le style avec quelque chose comme:

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

horreurs! Mais au moins de cette façon, je peux contrôler l'ensemble <ul>, l'en-tête et tout, en stylisant l' ulétiquette.

Quelle est la bonne façon de procéder? Des idées?

Comme Felipe Alsacreations l'a déjà dit, la première option est bonne.

Si vous voulez vous assurer que rien en dessous de la liste n'est interprété comme appartenant à l'en-tête, c'est exactement à quoi servent les éléments de contenu de coupe HTML5. Donc, par exemple, vous pouvez faire

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

Dans ce cas, j'utiliserais une liste de définitions comme suit:

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

Votre première option est la bonne. C'est la moins problématique et vous avez déjà trouvé les bonnes raisons pour lesquelles vous ne pouvez pas utiliser les autres options.

Au fait, votre rubrique EST explicitement associée au <ul>: il est juste avant la liste! ;)

edit: Steve Faulkner, l'un des éditeurs de W3C HTML5 et 5.1 a esquissé une définition d'un ltélément . C'est un brouillon non officiel dont il discutera pour HTML 5.2, rien de plus pour le moment.

un <div> est une division logique dans votre contenu, sémantiquement ce serait mon premier choix si je voulais grouper l'en-tête avec la liste:

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

alors vous pouvez utiliser le css suivant pour tout styliser ensemble comme une seule unité

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

Vous pouvez également utiliser l' <figure>élément pour lier un en-tête à votre liste comme ceci:

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

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

Essayez de définir une nouvelle classe, ulheader, en css. p.ulheader ~ ul sélectionne tout ce qui suit immédiatement Mon en-tête

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

Selon w3.org (notez que ce lien se trouve dans le brouillon de spécification HTML 3.0 expiré depuis longtemps ):

Une liste non ordonnée est généralement une liste à puces d'éléments. HTML 3.0 vous donne la possibilité de personnaliser les puces, de se passer de puces et d'encapsuler les éléments de liste horizontalement ou verticalement pour les listes à plusieurs colonnes.

La balise de la liste d'ouverture doit être <UL>. Il est suivi d'un en-tête de liste optionnel ( <LH>légende </LH>), puis du premier élément de liste ( <LI>). Par exemple:

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

qui pourrait être rendu comme:

Fruits de table

• pommes
• des oranges
• bananes

Remarque: certains documents hérités peuvent inclure des en-têtes ou du texte brut avant le premier élément LI. Il est conseillé aux développeurs d'agents utilisateurs HTML 3.0 de prendre en compte cette possibilité afin de gérer les documents hérités mal formés.

J'ai mis le titre à l'intérieur du ul. Aucune règle n'indique que UL doit contenir uniquement des éléments LI.