web-dev-qa-db-fra.com

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

Cela me gène depuis un moment et je me demande s’il existe un consensus sur la manière de procéder. Lorsque j'utilise une liste HTML, comment 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-tête <h3> 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 le titre ne fait pas vraiment partie 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> 'ne peut contenir qu'un ou plusieurs <li>'

L'ancien "en-tête de liste" <lh> prend tout son sens

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

mais bien sûr, il ne fait pas officiellement partie de HTML

J'ai entendu dire que nous utilisions <label> 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 sera pas validé quand même.

Il est facile de voir les problèmes sémantiques lorsque j'essaie de styler les en-têtes de liste, où je dois mettre mes balises <h3> dans le premier <li> et les cibler pour un style comme:

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

des horreurs! Mais au moins, je peux contrôler l'intégralité de <ul>, en-tête et tous, en appelant la balise ul.

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

htmlhtml-lists
102
Tomas Mulder

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

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>
47
Duncan Tidd

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 entête IS est explicitement associée au <ul>: elle se trouve juste avant la liste! ;)

edit: Steve Faulkner, l’un des éditeurs du W3C HTML5 et 5.1 a dessiné une définition d’un élément lt . C'est un projet non officiel qu'il discutera pour HTML 5.2, rien de plus.

9
FelipeAls

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

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

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

1
Rambobafet

Essayez de définir une nouvelle classe, ulheader, dans 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;
}
0
jpenkethman