Meilleure pratique pour fournir une légende, un titre ou une étiquette pour une liste en HTML

Quel est le meilleur moyen de fournir une légende pour une liste HTML? Par exemple

Fruit

  • Pomme
  • Poire
  • Orange

Comment le mot “fruit” devrait-il être traité, en particulier si je souhaite qu’il soit sémantiquement associé à la liste elle-même?

Bien qu’il n’y ait pas de légende ou d’élément de titre structurant, votre balisage peut avoir le même effet. Voici quelques suggestions:

Liste nestede

  • Fruit
    • Apple
    • Pear
    • Organge

Titre précédant la liste

 Fruit 
  • Apple
  • Pear
  • Orange

Liste de définition

 
Fruit
Apple
Pear
Orange

Option 1

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

Malgré leurs noms, ils ne sont pas définis comme étant limités aux illustrations graphiques.

Exemple:

 
Fruit
  • Apple
  • Pear
  • Orange

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


Option 2

Utiliser le pseudo-élément CSS3 :: before peut être une bonne solution:

HTML:

 
  • Apple
  • Pear
  • Orange

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 entendu utiliser un sélecteur différent de ul[title] ; Par exemple, vous pouvez append une classe “title-as-header” et utiliser ul.title-as-header::before place ou tout ce dont vous avez besoin.

Cela a pour effet secondaire de vous donner une infobulle pour toute la liste. Si vous ne voulez pas une telle infobulle, vous pouvez utiliser un atsortingbut de données à la place (par exemple,

    et ul[data-title]::before { content: attr(data-title); } ).

    Pour autant que je sache, les spécifications HTML actuelles ne contiennent aucune disposition permettant de fournir une légende pour une liste, comme il en existe pour les tables. Je restrais avec l’utilisation d’un paragraphe classifié, ou d’une balise d’en-tête pour le moment.

     

    Fruit

    • Apple
    • Pear
    • Orange

    À l’avenir, lorsque le HTML5 sera plus largement adopté, vous pourrez utiliser les balises

    et

    pour y parvenir plus sémantiquement.

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

    Il n’y a pas de tag de type légende pour une liste comme une table. Donc, je lui donne juste un (x en fonction de vos en-têtes précédemment utilisés).