[Résolu] Organisation d'une liste d'éléments

Bonjour à tous
Je serais intéressé à avoir votre avis sur le point suivant:
Une liste d'éléments est définie par une balise <ul> ou <ol> contenant des éléments contenus dans des balises <li>.
Néanmoins il est fréquent d'avoir en tête d'une liste un titre ou un texte introductif.
Je me demande laquelle de ces structures est la mieux adaptée:

<h4>Liste des éléments tartempion</h4>
<p>Le sujet qui nos préoccupe contient de nombreux éléments de type "tartempion":</p>
<ul>
    <li>les tartempions rouges....</li>
    <li>les tartempions bleus ...</li>
    <li>........................<li>
    <li>........................<li>
    <li>........................<li>
</ul>

ou bien

<ul>
    <h4>Liste des éléments tartempion</h4>
    <p>Le sujet qui nos préoccupe contient de nombreux éléments de type "tartempion":</p>
    <li>les tartempions rouges....</li>
    <li>les tartempions bleus ...</li>
    <li>........................<li>
    <li>........................<li>
    <li>........................<li>
</ul>

Merci de vos avis
Modifié par PapyJP (18 Apr 2017 - 19:11)

Bonjour,

Je dirais la première solution, le titre et l'intro ne font pas parti de la liste d'élément à proprement parler.
En plus au niveau du code je ne pense pas que ce soit recommandé de mettre autre chose que des <li> dans des <ul>. Au pire il faut mettre le titre dans un <li> mais je n'y vois pas trop d’intérêt pour la première raison que j'ai donné.

Bonne journée
Modifié par _laurent (18 Apr 2017 - 14:41)

Bonjour,

Dans une balise <ul> ou <ol> seul l'élément <li> est autorisé pour avoir une sémantique html propre.

La première solution est donc la meilleure.

fanfann a écrit :
Dans une balise <ul> ou <ol>seul l'élément <li> est autorisé pour avoir une sémantique html propre.

C'est ce que j'ai toujours cru et toujours pratiqué, néanmoins "sémantiquement" le titre d'une liste me semble faire partie de la liste, de même que le titre d'un chapitre fait partie du chapitre.

Je n'ai pas trouvé où ce genre de "règle" était défini. Il y a une différence sensible entre "règle et "coutume", je me demande s'il ne s'agit pas simplement d'une coutume.

C'est en faisant un automate de traduction d'une structure HTML ancienne en quelque chose de plus moderne que je suis tombé sur cette situation: l'automate avait mis le titre dans la liste, et j'ai constaté que les navigateurs avec lesquels j'ai testé cette configuration étrange avaient l'air de l'accepter sans problème, d'où ma question.

Edit: concernant la proposition de _laurent, je ne crois pas que ce soit approprié: sémantiquement, le titre de la liste n'est pas un item de la liste (mais bien entendu un élément de la liste peut également avoir un titre)
Modifié par PapyJP (18 Apr 2017 - 16:11)

Je trouve l'idée super chouette !
Comme pour les table et ses <th>, il pourrait y avoir une balise <lh> pour les header des <ul> et <ol>

<table>
   <tbody>
      <tr>
         <th>title</th>
         <td>content</td>
      </tr>
   <tbody>
</table>

<ul>
   <lh>title</lh>
   <li><content/li>
</ul>

Edit : ça à l'air d'exister sur le site de W3C + un exemple codepen
Modifié par Yordi (18 Apr 2017 - 16:36)

Bonjour,
Non, ce n'est pas une coutume mais bien une règle.
En HTML 4 : https://www.w3.org/TR/html4/struct/lists.html#h-10.2
En HTML 5 ( https://www.w3.org/TR/2011/WD-html5-20110525/content-models.html ), LI (au même titre que les éléments de tableaux) n'est même pas mentionné car dépendant d'une structure prédéfinie (enfant de UL ou OL (ou MENU, si ça existe toujours)).

Pour les titres de listes; en général on met un <Hx> avant. Il me semble qu'il a été question d'un élément (HL ou LH je crois) pour les titres de listes, mais je crois que ça été abandonné.
Modifié par Seven tears (18 Apr 2017 - 16:47)

Yordi a écrit :
Edit : ça à l'air d'exister sur le site de W3C + un exemple codepen

HTML 3 quand même !

W3C a écrit :

The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document.

The items of the list are the li element child nodes of the ul element.

Que les termes ("items") de la liste soient des éléments <li>, on est bien d'accord, mais où est-il dit qu'il ne peut pas y avoir d'autres balises avant ou au milieu des balises <li>?

Pour HTML4, dans la DTD :

<!ELEMENT UL - - (LI)+                 -- unordered list -->

Ce qui signifie qu'un élément UL peut contenir un ou plusieurs enfants LI, et uniquement ces enfants-là.

Pour HTML5, quelques lignes avant votre citation, dans la présentation :

https://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-ul-element a écrit :
4.5.6 The ul element
Categories
Flow content.
Contexts in which this element can be used:
Where flow content is expected.
Content model:
Zero or more li elements.
Content attributes:
Global attributes

Modifié par Seven tears (18 Apr 2017 - 18:00)

Ok
Je ne comprends pas la signification de cette restriction, mais effectivement elle existe.
On doit certainement pouvoir contourner cette restriction en insérant des balise <li> fictives et en les stylant correctement, car une balise <li> peut contenir un peu n'importe quoi, mais c'est une "astuce" que je me garderais bien d'utiliser, car sémantiquement le titre et les commentaires ne sont pas des termes de la liste.

En gros:
- une balise <ul> ne contient pas une liste, mais seulement la suite des termes d'une liste; de même qu'une balise <img> contient une image, et non une <figure> pour laquelle on a créé (récemment) une balise spécifique.
- si on veut créer un objet "liste", il faut utiliser un contenant différent, par exemple <section>, que l'on peut munir d'un titre, d'un texte, etc. avant et/ou après l'ensemble des termes, par exemple:

<section class="liste">
  <h4>Liste des éléments tartempion</h4>
  <p>Le sujet qui nos préoccupe contient de nombreux éléments de type "tartempion":</p>
  <ul>
    <li>les tartempions rouges....</li>
    <li>les tartempions bleus ...</li>
    <li>........................<li>
    <li>........................<li>
    <li>........................<li>
  </ul>
  <p>Dans la suite de ce document, nous ferons une description détaillée de chacun</p>
</section>

Complément:
en lisant le document signalé par Yordi, je trouve effectivement:

W3c a écrit :
Note: Some legacy documents may include headers or plain text before the first LI element. Implementors of HTML 3.0 user agents are advised to cater for this possibility in order to handle badly formed legacy documents.

Cela explique pourquoi cela fonctionne sans problème sur la plupart des navigateurs, même si c'est non conforme.

Il est intéressant de constater que:
1) le besoin d'avoir un titre attaché à une liste a bien été identifié il y a longtemps
2) les développeurs ont constaté qu'il était possible d'insérer un titre dans une balise <ul> sans problème
3) ce besoin a été reconnu et traité dans HTML3
4) il a été ensuite supprimé de la norme
5) mais comme les navigateurs doivent pouvoir supporter des documents "anciens", et même "très anciens", ce support est toujours assuré.

Bonjour,

Ceci est bien une règle.
Vérifié par vous même : https://validator.w3.org/#validate_by_input

Ce code est valide :

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>
<body>
<ul>
    <li>les tartempions rouges....</li>
    <li>les tartempions bleus ...</li>
</ul>
</body>
</html>

Celui ci ne l'est pas :

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
</head>
<body>
<ul>
    <h4>Titre</h4>
    <li>les tartempions rouges....</li>
    <li>les tartempions bleus ...</li>
</ul>
</body>
</html>

Résultat :
Error: Element h4 not allowed as child of element ul in this context.


Bonne journée

Ce «besoin» a été retiré, car il faisait contresens avec la sémantique des titres.
Un titre n'est pas un titre pour son parent, mais pour les éléments qui suivent:

<h1>titre</h1>
<p>texte</p>
<p>texte</p>
<h2>titre</h2>
<p>texte</p>
<ul> … </ul>
<h2>titre</h2>
<p>texte</p>

devient sémantiquement:

- h1
   |- texte
   |- texte
   |- h2
      |- texte
      |- ul
   |- h2
      |- texte

Ainsi le titre dans un liste n'apportait rien sémantiquement mais posait plein d'autres problèmes.

Si on souhaite vraiment lier fortement un titre à une liste:

<figure>
    <figcaption>titre</figcaption>
    <ul>
        <li>un</li>
        <li>deux</li>
        <li>trois</li>
    </ul>
</figure>