Structurer des infos avec les listes à puce et de définition

Bonjour, ma question concerne la structure d'une page d'évènements, celle de la rubrique Agenda de notre site de territoire.

Comme il y a à chaque fois au moins un titre d'évènement plusieurs éléments de description, j'ai opté pour la structure de la liste de définition... mais en l'intégrant à l'intérieur d'une liste classique.

Est-ce correct ? Sinon, que me conseilleriez vous ? Merci !

<ul>
<li>
    <dl>
    <dt>titre 1</dt>
    <dd>date 1</dd>
    <dd>lieu 1</dd>
    </dl>
</li>
<li>
    <dl>
    <dt>titre 2</dt>
    <dd>date 2</dd>
    <dd>lieu 2</dd>
    </dl>
</li>
</ul>

Modifié par Thiebaut (01 Feb 2014 - 13:24)

Bonjour Thiebaut,

Tu peux faire une liste beaucoup plus courte que celle-là.
Voici un exemple :

<ul>
<li>
    <dl>
        <dt>titre 1</dt>
        <dd>date 1</dd>
        <dd>lieu 1</dd>
        <dt>titre 2</dt>
        <dd>date 2</dd>
        <dd>lieu 2</dd>
    </dl>
</li>
</ul>

Ensuite, ça dépend ce que tu veux faire au final.

Merci Jeff,

Donc dans un cas comme dans l'autre ce n'est pas contraire aux bonnes recommandations du W3C de mettre des dl dans des li ?

Je n'ai jamais testé de code avec des dl dans des li.
Tu peux vérifier ton code à cette adresse : http://validator.w3.org/
Si c'est vert au final, c'est que c'est OK.

Techniquement, du point de vue de la spécification HTML, je pense que ça doit être valide W3C.

Par contre, sémantiquement, je pense que ce n'est pas terrible, et que une <dl> dans une <ul> n'a que très très peu d'intérêt.

A mon avis, au moins une des deux listes est de trop et tu devrais utiliser plus souvent des titres <hn> à la place pour en remplacer une, ou carrément les deux. Par exemple, si tes évènements titre/lieu/date sont groupés par catégories/thème, tu as tout intérêt à utiliser une hiérarchie de titres <hn> classique, le balisage est beaucoup moins lourd et c'est meilleur pour la'ccessibilité.

Après, comme toujours dans les questions de sémantique, ça dépend de ce que tu cherches à faire exactement.

@jeff-roland mettre un seul li dans un ul, je vois pas l'intérêt.

D'autre part tu pourrais utiliser un bon vieux tableau.

Je sais bien qu'on a banni récemment, et à juste titre, l'usage des tableaux pour la mise en page html, mais dans le cas de données tabulaires, comme ici, ils sont complétement valables...

Merci à vous tous pour vos avis. Je me doutais que c'était du bricolage. Le validateur n'aime pas : donc déjà comme ça, c'est réglé (j'aurais pu commencer par là).

Maintenant, je sais ce qui me reste à faire : choisir entre une dl classique, les bon vieux titres ou le tableau. Je pense opter pour la dl.

Je marque le sujet comme résolu.