Comment fournir sémantiquement une légende, un titre ou une étiquette pour une liste en HTML

Question

Quelle est la bonne façon de fournir un sémantique légende pour une liste HTML? Par exemple, la liste suivante a un « titre » / « légende ».

Fruit

• Apple
• Pear
• Orange

Comment le mot « fruit » soit traité, de telle sorte qu'il est sémantiquement associé à la liste elle-même?

Answer 1

Bien qu'il n'y ait pas de légende ou de la position élément structurant votre balisage peut effectivement avoir le même effet. Voici quelques suggestions:

Liste Nested

<ul>
    <li>
        Fruit
        <ul>
            <li>Apple</li>
            <li>Pear</li>
            <li>Organge</li>
        </ul>
    </li>
</ul>

---

Rubrique Avant Liste

<hX>Fruit</hX>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

---

Liste de définitions

<dl>
  <dt>Fruit</dt>
  <dd>Apple</dd>
  <dd>Pear</dd>
  <dd>Orange</dd>
</dl>

Answer 2

Option 1

HTML5 comporte les éléments figure et figcaption , que je trouve tout à fait bien le travail.

Exemple:

<figure>
    <figcaption>Fruit</figcaption>
    <ul>
        <li>Apple</li>
        <li>Pear</li>
        <li>Orange</li>
    </ul>
</figure>

Ceux-ci sont alors facilement avec les CSS de style.

---

2

Utilisation :: avant pseudo-élément de CSS3 peut être une belle solution:

HTML:

<ul title="Fruit">
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

CSS:

ul[title]::before {
    content: attr(title);
    /* then add some nice styling as needed, eg: */
    display: block;
    font-weight: bold;
    padding: 4px;
}

Vous pouvez, bien sûr, utiliser un sélecteur différent de celui ul[title]; par exemple, vous pouvez ajouter une classe « title-en-tête » et utiliser ul.title-as-header::before à la place, ou tout ce que vous avez besoin.

Cela n'a l'effet secondaire de vous donner une info-bulle pour la liste complète. Si vous ne voulez pas une telle info-bulle, vous pouvez utiliser un attribut de données au lieu (par exemple, <ul data-title="fruit"> et ul[data-title]::before { content: attr(data-title); }).

Answer 3

Pour autant que je sache, il n'y a aucune disposition dans les spécifications HTML actuelles pour fournir une légende pour une liste, comme il y a des tables. Je reste avec l'aide d'un paragraphe Classée, ou un tag d'en-tête pour l'instant.

<h3>Fruit</h3>
<ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
</ul>

Dans l'avenir, lorsque les gains HTML5 plus large adoption, vous serez en mesure d'utiliser les balises <legend> et <figure> d'y arriver un peu plus sémantiquement.

Voir ce post sur la liste de diffusion du W3C pour plus d'informations.

Answer 4

Il n'y a pas de balise comme légende pour une liste comme une table a. Alors que je venais de lui donner un <Hx> (x en fonction de vos en-têtes utilisés précédemment).

Answer 5

Vous pouvez toujours utiliser <label/> associer l'étiquette à votre élément de la liste:

<div>
    <label for="list-2">TEST</label>
    <ul id="list-1">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <label for="list-2">TEST</label>
    <ol id="list-2">
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
</div>