Listes DD ou UL ? [résolu]

Bonjour,

Je me demande ce qu'il faut utiliser pour une suite de liens : une liste à puce ou une liste de définition ?

J'ai vu que Jefrey Zeldman sur sont site emploi la deuxième méthode, bien qu'il ne s'agit pas de définition... Est-ce anti-sémantique ?
http://www.zeldman.com/externals/

Merci de me donner votre point de vue
Modifié par Samuel Berg (14 Oct 2005 - 15:44)

Salut

si on a par exemple

<h2>Menus</h2>
<dl>
<dt>Menu1</dt>
<dd>lien 1.1</dd>
<dd>lien 1.2</dd>
<dd>lien 1.3</dd>
<dd>lien 1.4</dd>
</dl>

<dl>
<dt>Menu2</dt>
<dd>lien 2.1</dd>
<dd>lien 2.2</dd>
<dd>lien 2.3</dd>
<dd>lien 2.4</dd>
</dl>

Tout dépend de la façon dont tu apprécies le statut des dt.

Soit tu considères qu'il doivent réellement avoir un statut de titre et dans ce cas il faut utiliser des listes <ul> précédées d'un h3.

Soit tu penses qu'il n'est pas nécessaire de pousser à un tel point la structuration par hn et dans ce cas je trouve que l'utilisation des listes de définitions n'est pas problématique.

La question porte donc plus sur la bonne utilisation des titres que sur les listes de définition en elles même.

Avec une réserve importante néanmoins s'il s'agissait d'imbriquer d'autres listes dans les <dl>

Donc si je résume, c'est une bonne solution pour éviter des <h3>. Selon les souhaits de chacun.

Je note merci

Mais pourquoi voudrait on éviter les h3 (ou autres) ?????

Ce n'était pas du tout le sens de ma réponse.

MDR

Juste comme ca, pourquoi ne pas utiliser des listes UL imbriquées ? Le menu en entier serait dans une seule et unique liste, mais avec différents niveaux. Je préfère conserver les h1,h2,h3 etc... pour les sections du site, et non pas pour le titre des menus. Ce n'est ni une règle absolue que je me suis fixé ni une meilleure pratique qu'une autre, juste une question de point de vue personnel. Cela dépend aussi du design, bien sûr.

Est-ce que la séparation des deux menus n'est là que pour permettre de positionner les deux menus par la suite ? De les éloigner l'un de l'autre, ou d'en mettre un à gauche et l'autre à droite de l'interface ? Pourquoi les séparer, là est ma question qui s'adresse surtout à clb56. Pour permettre plus de liberté au cas où le design changerait ?
Modifié par Merkel (06 Oct 2005 - 14:31)

Laurent Denis a écrit :
MDR

pour référence :

Laurent Denis a écrit :
Soit tu penses qu'il n'est pas nécessaire de pousser à un tel point la structuration par hn et dans ce cas je trouve que l'utilisation des listes de définitions n'est pas problématique.

Et au fait, pourquoi

<dl>
<dt>Menu 1</dt>
<dd>Item 1.1</dd>
<dd>Item 1.2</dd>
...
</dl>

<dl>
<dt>Menu 2</dt>
<dd>Item 2.1</dd>
<dd>Item 2.2</dd>
...
</dl>

...
<dl>
<dt>MEnu n</dt>
...
</dl>

au lieu de

<dl>
<dt>Menu 1</dt>
<dd>Item 1.1</dd>
<dd>ITem 1.2</dd>
...
<dt>Menu 2</dt>
<dd<Item 2.1</dd>
<dd>Item 2.2</dd>
...
<dt>Menu n</dt>
...
</dl>

?

Bonjour,

Ce qui me faisait rire, Samuel, c'était ce tour inattendu pris par la discussion, aboutissant à l'idée d'éviter les titre <hn>, ce qui est justement la chose à éviter. On se demande bien, d'ailleurs, pourquoi ils devraient être évités.

Les listes de déifition peuvent très bien être justifiés, selon le contenu du menu (ou des menus). Quoique dans ce cas, les listes de définition ou les listes <ul> et <ol>, cela ne fait guère de différence, voire aucune. Ce n'est pas l'important.

En effet, cela n'a aucun rapport avec le titrage. Celui-ci, qu'on soit ou non dans le cas de menus à contenu hiérarchisé, offre un moyen de structuration limpide et un excellent outil d'accessibilité au sens le plus large comme le plus précis. Qui ne peut pas être remplacé actuellement par les listes seules.

Les listes de définition donnent effectivement le sentiment de réussir à structurer son contenu de manière moins "plate", avec un élément explicitement destiné à définir un tout composé d'items organisés et successifs.

Sauf que la portée de cette structuration en listes de définition est très réduite en réalité, car cette manière de s'en servir est une ajout de sémantique sur le HTML, et que les outils qui ont besoin de trouver une structure de menu ferme ne sont pas au courant et n'ont aucune raison de l'être.

Concrètement, avec des titres :
- le menu de navigation s'intègre dans la navigation via le titrage, que ce soit dans un lecteur d'écran ou un navigateur graphique doté du bidule d'accessibilité ad hoc.
- le rendu est imparable sans les CSS, quelque soit le media
- la navigation s'intègre dans l'indexation du site (Google aime les menus de navigation avec des titres)
- etc.


Avec des listes de définition ou des listes simples seules, rien de tout cela, sauf le rendu potable, mais améliorable.

Donc: liste ordonnées ou listes de définition, peu importe. Le plus adapté à votre cas. Mais ne pas négliger le titrage, nettement plus important.

En attendant d'éliminer ces maudits menus de navigation des documents Web, et de les reporter sur une autre prise en charge via l'agent utilisateur...

Pour répondre à Merkel : le site n'existe pas. Il n'y a guère actuellement que le document (la ressource). Et dans celui-ci, une structure aussi cohérente et utilisable que possible.
Modifié par Laurent Denis (07 Oct 2005 - 11:39)

Laurent Denis a écrit :
MDR

tu m'étonnes

Laurent Denis a écrit :

Sauf que la portée de cette structuration en listes de définition est très réduite en réalité.

C'est bien sur la prise en compte de ce point que j'ai élaboré ma réponse. Comme j'estime avoir tout dit dans cette réponse je ne rajoute rien hors le fait que si une liste de définition n'ajoute que très peu ou rien en terme de structuration elle n'enlève rien non plus. Encore une fois tout n'est qu'une question d'appréciation de l'exhaustivité nécessaire (ou simplement souhaitée) de la hiérarchisation par hn.
Modifié par clb56 (07 Oct 2005 - 13:48)

Laurent Denis a écrit :

Pour répondre à Merkel : le site n'existe pas. Il n'y a guère actuellement que le document (la ressource). Et dans celui-ci, une structure aussi cohérente et utilisable que possible.

Là tu me cherche ! Vraiment ! Tu le sais très bien ce qu'on veut dire par "site". Dorénavant, au lieu de dire : "Hey mon ami, viens visiter mon site !", je vais me contenter de dire : "Hey mon ami, viens consulter mon ensemble de ressources !". Non mais ce Laurent, il mange trop de brocolis !

Je vais plutôt me satisfaire de cette réponse :

Laurent Denis a écrit :

Concrètement, avec des titres :
- le menu de navigation s'intègre dans la navigation via le titrage, que ce soit dans un lecteur d'écran ou un navigateur graphique doté du bidule d'accessibilité ad hoc.
- le rendu est imparable sans les CSS, quelque soit le media
- la navigation s'intègre dans l'indexation du site (Google aime les menus de navigation avec des titres)
- etc.

Bonne journée les brocolis !

jpv a écrit :

Cette opposition récurrente liste de définition Vs liste pour produire un menu est stérile, rien n'oppose formellement ces deux méthodes.

C'est très précisemment mon point de vue. Rien n'oppose :

<h2>Menus</h2>
<ul>
<li><a href="">Lien 1.1</a></li>
<li><a href="">Lien 1.2</a></li>
<li><a href="">Lien 1.3</a></li>
<li><a href="">Lien 1.4</a></li>
</ul>

<ul>
<li><a href="">Lien 2.1</a></li>
<li><a href="">Lien 2.2</a></li>
<li><a href="">Lien 2.3</a></li>
<li><a href="">Lien 2.4</a></li>
</ul>

et

<h2>Menus</h2>
<dl>
<dt>Menu 1</dt>
<dd><a href="">Lien 1.1</a></dd>
<dd><a href="">Lien 1.2</a></dd>
<dd><a href="">Lien 1.3</a></dd>
<dd><a href="">Lien 1.4</a></dd>
</dl>

<dl>
<dt>Menu 2</dt>
<dd><a href="">Lien 2.1</a></dd>
<dd><a href="">Lien 2.2</a></dd>
<dd><a href="">Lien 2.3</a></dd>
<dd><a href="">Lien 2.4</a></dd>
</dl>

La question de l'opposition ne concernerait que :

<h2>Menus</h2>

<h3>Menu 1</h3>
<ul>
<li><a href="">Lien 1.1</a></li>
<li><a href="">Lien 1.2</a></li>
<li><a href="">Lien 1.3</a></li>
<li><a href="">Lien 1.4</a></li>
</ul>

<h3>Menu 2</h3>
<ul>
<li><a href="">Lien 2.1</a></li>
<li><a href="">Lien 2.2</a></li>
<li><a href="">Lien 2.3</a></li>
<li><a href="">Lien 2.4</a></li>
</ul>

contre

<h2>Menus</h2>
<dl>
<dt>Menu 1</dt>
<dd><a href="">Lien 1.1</a></dd>
<dd><a href="">Lien 1.2</a></dd>
<dd><a href="">Lien 1.3</a></dd>
<dd><a href="">Lien 1.4</a></dd>
</dl>

<dl>
<dt>Menu 2</dt>
<dd><a href="">Lien 2.1</a></dd>
<dd><a href="">Lien 2.2</a></dd>
<dd><a href="">Lien 2.3</a></dd>
<dd><a href="">Lien 2.4</a></dd>
</dl>

Mais la question ne se pose pas c'est catégoriquement la structure hn + ul qui doit être utilisée.

La seule question qui reste c'est :

<h2>Menus</h2>
<ul>
<li><a href="">Lien 1.1</a></li>
<li><a href="">Lien 1.2</a></li>
<li><a href="">Lien 1.3</a></li>
<li><a href="">Lien 1.4</a></li>
</ul>

<ul>
<li><a href="">Lien 2.1</a></li>
<li><a href="">Lien 2.2</a></li>
<li><a href="">Lien 2.3</a></li>
<li><a href="">Lien 2.4</a></li>
</ul>

Ou

<h2>Menus</h2>

<h3>Menu 1</h3>
<ul>
<li><a href="">Lien 1.1</a></li>
<li><a href="">Lien 1.2</a></li>
<li><a href="">Lien 1.3</a></li>
<li><a href="">Lien 1.4</a></li>
</ul>

<h3>Menu 2</h3>
<ul>
<li><a href="">Lien 2.1</a></li>
<li><a href="">Lien 2.2</a></li>
<li><a href="">Lien 2.3</a></li>
<li><a href="">Lien 2.4</a></li>
</ul>

C'est celà que j'appelle l'exhaustivité de la hiérarchisation. On peut effectivement considérer que le cas 1 (h2 + ul + ul ) suffit.

a écrit :

Si l'utilisation de liste de définition n'ajouter ni ne retire rien pourquoi se compliquer la vie ?

Parce qu'une fois qu'on a fait attention à ne pas faire de conneries on a quand même le droit de faire un peu ce qu'on veut.

Très intéressant point de vue / comparaisons...

mais que pensez-vous de ce type de menu en arborescence :

<h2>Menu</h2>
<ul>
<li>Item indépendant 1</li>
<li>Item indépendant 2</li>
<li>Item indépendant 3</li>
<li><h3>Sous-menu 1</h3>
<ul>
<li>Item s1.1</li>
<li>s 1.2</li>
<li>s1.3</li>
</ul></li>
<li><h3>Sous-menu 2</h3>
<ul>
<li>s2.1</li>
<li>s2.2</li>
<li>s2.3</li>
<li><h4>Sous-sous menu 2.4</h4>
<ul>
<li>2.4.1</li>
<li>2.4.2</li>
<li>2.4.3</li>
</ul></li>
</ul></li>
</ul>

?

à QuentinC,

2 choses,

1. ta remarque est étrange car c'est bien toi qui a dit que trop de titres tue les titres et là tu combines titres et imbrication de listes soit donc usine à gaz au carré. Tout celà devrait être de toute façon allégé et dans ce cas c'est bien la structuration par titre seule qui sera retenue car c'est la plus "rentable".

2. Ce que tu décris n'est pas un menu mais carrément l'ébauche d'un plan de site, si c'est un menu alors il est déjà trop lourd.

C'est aussi ce que je me disais : usine à gaz. Je garde mes ul imbriqués tout seuls; ils vont très bien.

Si tu vas voir sur mon site, tu verras que mon menu ne s'éloigne pas tant que ça de ce que j'ai posté tout à l'heure : j'ai juste pas les titres.
Pour info : en compteant récursivement menus et sous-menus, mon menu principal (celui qui est sur toutes les pages) comporte 44 éléments, liens d'évitements compris.
Je ne vous parle même pas du plan du site : 184 éléments répartis sur 5 niveaux de listes.

D'après vous, ce serait... beaucoup trop ?

P.S. Si vous avez des suggestions pour le raccourcir, postez ici pour que j'aie toutes vos suggestions au même endroit, merci de votre compréhension.

Pourquoi dis-tu que tu as du mal à te faire comprendre ?
Qu'est-ce qu'elles ont mes listes ul imbriquées ?

QuentinC a écrit :
Pourquoi dis-tu que tu as du mal à te faire comprendre ?

ben

clb56 donc moi même a écrit :

Tout celà devrait être de toute façon allégé et dans ce cas c'est bien la structuration par titre seule qui sera retenue car c'est la plus "rentable"