web-dev-qa-db-fra.com

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

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

Fruit

  • Apple
  • Poire
  • Orange

Comment le mot "fruit" doit-il être traité, de manière à être sémantiquement associé à la liste elle-même?

htmlhtml-listssemantic-markup
60
Jon P

Bien qu'il n'y ait pas d'élément de légende ou d'en-tête structurer efficacement votre balisage peut avoir le même effet. Voici quelques suggestions:

Liste imbriquée

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

en-tête avant la 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>
59
ahsteele

Option 1

HTML5 a les éléments figure et figcaption , que je trouve très bien.

Exemple:

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

Ceux-ci sont ensuite facilement stylisés avec CSS.

Option 2

Utiliser le pseudo-élément CSS3 :: avant peut être une bonne 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 ul[title]; par exemple, vous pouvez ajouter une classe 'title-as-header' et utiliser à la place ul.title-as-header::before, ou tout ce dont vous avez besoin.

Cela a pour effet secondaire de vous donner une info-bulle pour toute la liste. Si vous ne voulez pas d'une telle info-bulle, vous pouvez utiliser un attribut de données à la place (par exemple, <ul data-title="fruit"> Et ul[data-title]::before { content: attr(data-title); }).

32
megaflop

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 en existe pour les tableaux. Je resterais en utilisant soit un paragraphe classifié, soit une balise d'en-tête pour l'instant.

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

À l'avenir, lorsque HTML5 gagnera en popularité, vous pourrez utiliser le <legend> et <figure> tags pour accomplir cela un peu plus sémantiquement.

Voir cet article sur la liste de diffusion du W3C pour plus d'informations.

12
sixthgear

Il n'y a pas de balise de type légende pour une liste comme une table. Je lui donnerais donc juste un <Hx> (x selon vos en-têtes précédemment utilisés).

1
I.devries

Vous pouvez toujours utiliser <label/> pour associer une étiquette à votre élément de 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>
0
HelpNeeder