Comment ajouter sémantiquement un en-tête à une liste

Question

Cela a été me tracasse depuis un moment, et je me demandais si il n'y a aucun consensus sur la façon de le faire correctement. Quand je suis à l'aide d'une liste HTML, comment puis-je sémantiquement inclure un en-tête de la liste?

Une option est ceci:

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

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

Une autre option est ceci:

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

mais cela semble un peu sale, comme le titre 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>

en tant que <ul>s'ne peut contenir un ou plusieurs <li>s'

L'ancienne "tête de liste" <lh> qui fait le plus de sens

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

mais bien sûr, il n'est pas officiellement partie de HTML

J'ai entendu dire que nous utilisons <label> comme une forme:

<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 la semantical des problèmes lorsque vous tentez de mon style de liste des en-têtes, où je suis obligé de mettre mon <h3> tags à l'intérieur du premier <li> et les cibles 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 de l' <ul>, en-tête et tous, par le style de l' ul balise.

Quelle est la bonne façon de le faire? Des idées?

Answer 1

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

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 la section HTML5. Ainsi, par exemple, vous pourriez 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. -->
 

Answer 2

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>
 

Answer 3

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

Au fait, votre rubrique est explicitement associée au: c'est juste avant la liste! ;)

Answer 4

un <div> est une division logique de votre contenu. Sémantiquement, ce serait mon premier choix si je voulais regrouper 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 styler le tout en une seule unité

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

Answer 5

Je mets le titre à l'intérieur du ul. Aucune règle ne dit que UL doit contenir uniquement des éléments LI.