Perdu dans l'utilisation des ul-li, dl-dt, hn....

Bonjour,

Après lecture du poste de Mathieu_vd sur le "Dilemme sémantique dans la structuration d'une liste de lien" je suis dans le flou le plus total.

En régle génrale les menus de navigations utilisent des <ul><li>

Pour les listes de news j'utilisait les <dl><dt> mais apparement vaut mieux des <hn>

Pour les fils d'arianes j'utilise aussi les <ul><li> en in-line et je peux rajouter des flèches par ex accueil > page en image css au lieu d'utiliser le caractère | ou >

Si on veut afficher un résultat d'une recherche à la google par ex, que faut t-il utiliser ? <ol><li>, <dl><dt>, <hn> ?
Idem par ex pour un livre d'or, faq, glossaire ...

Dans quelque cas utiliser l'un ou l'autre ?
Connaissez-vous un site présentant divers affichages de contenu en utilisant les bonnes balises (pour la sémantique, accéssibilité...)

[Edit] : Sur openweb la liste des news est en <dl><dt>, sur alsacréation en <hn>
Quelle est la plus "valable" ? pourquoi ?


Merci @+
Modifié par btr (24 Aug 2006 - 20:24)

Salut

C'est une question d'interprétation, bien souvent ... On utilise les balises <ul> pour les menus parce qu'on les considère comme des listes de liens. Mais ce n'est pas un point de vue indiscutable :s

En général, la question à se poser est "que vais-je mettre à l'intérieur de cette balise ?". Si tu affiches un système de news, et que tu introduis sur ta page le titre de la news, suivi de son texte, y'a pas photo, c'est un titre --> hn. Si par contre tu listes tous les titres, en faisant un lien vers le contenu, ça devient une liste --> li. Et enfin, si tu affiches le titre plus une description & un lien, on peut envisager le point de vue liste de définition --> dl

Je ne sais pas si c'est plus clair

Si j'ai bien compris :

liste de définition pour :

titre (lien)
photo + description
Voir un lien ici aussi

titre (lien)
photo + description
Voir un lien ici aussi


Liste pour :

titre (lien)
titre (lien)
titre (lien)

Titre pour :

Titre
Description (article complet)


Donc pour une liste de résultat d'un moteur de recherche ou livre d'or ça serait une liste de définition.

btr a écrit :
Si j'ai bien compris :

liste de définition pour :

titre (lien)
photo + description
Voir un lien ici aussi

titre (lien)
photo + description
Voir un lien ici aussi

Ou alors ceci :

<hN>titre (lien)</hN>
<p>photo + description</p>
<p>Voir un lien ici aussi</p>

Ça ne me semble pas moins « correct ».
Pour ma part je suis sceptique sur la « plasticité » des listes de définitions. Je me demande comment un utilisateur de lecteur d'écran va réagir en entendant « liste de définition terme Nouvel article sur l'épandage agricole définition image définition L'épandage agricole expliqué de A à Z » (un truc du genre). Pas sûr que ça soit ce qu'il y a de mieux.

Pour le coup, je pense qu'il est utile de se référer à l'usage : des listes non ordonnées contenant des séries de liens pourront être comprises comme un menu de navigation, car c'est un usage assez fréquent. « Sémantiquement » parlant, la liste non ordonnée n'est pas beaucoup plus neutre qu'une liste de définitions (quoique...), mais l'usage large qui en est fait a en quelque sorte élargi le champ de ses significations. Le plus important est que les utilisateurs sont habitués aux diverses utilisations des listes non ordonnées, mais beaucoup moins aux utilisations tarabiscotées des listes de définitions.

Utiliser des listes de définitions pour des menus sur plusieurs niveaux (voire un tutoriel vieillissant sur Alsacréations, à propos des menus déroulants) est par exemple une mauvaise idée.

Dans le cas que tu présente, je pense que ça peut aller. Donc pourquoi pas les utiliser, effectivement.


Globalement, il faut éviter d'en faire trop, et vouloir « organiser sémantiquement » l'information peut pousser à « sur-sémantiser » et ainsi à perturber l'utilisateur. En cas de doute, se rabattre sur des éléments généralistes comme p ou ul (ul étant devenu très généraliste par la force des choses).

a écrit :
Globalement, il faut éviter d'en faire trop, et vouloir « organiser sémantiquement » l'information peut pousser à « sur-sémantiser » et ainsi à perturber l'utilisateur. En cas de doute, se rabattre sur des éléments généralistes comme p ou ul (ul étant devenu très généraliste par la force des choses).

Qu'est-ce que tu entends par "généralistes" ? J'ai l'impression que le terme est mal choisi. Les balises p et ul ont une signification tout aussi précise que d'autres balises moins courantes, non ? Les seules balises "généralistes" sont div et span ...

Coupage de cheveux en quatre, mais bon :

Dans le cas (d'école) où il n'y aurait pas moyen de trancher entre 2 possibilités, quelle est la meilleure solution à adopter ? utiliser p au risque d'induire le visiteur en erreur quant au contenu de la balise, ou se rabattre vers une division qui ne peut pas induire en erreur, puisqu'elle ne transmet pas d'information particulière ?
Modifié par Sopo (25 Aug 2006 - 23:07)

Sopo a écrit :
Qu'est-ce que tu entends par "généralistes" ? J'ai l'impression que le terme est mal choisi. Les balises p et ul ont une signification tout aussi précise que d'autres balises moins courantes, non ? Les seules balises "généralistes" sont div et span ...

Effectivement, les balises les plus neutres sémantiquement sont div et span. Mais force est de constater que, vu l'usage intensif qui en est fait, l'élément p est perçu comme étant plutôt neutre. Donc si on est allergique aux divs...
Personnellement, j'utilise plutôt des paragraphes que des div, même quand il ne s'agit pas particulièrement d'un « paragraphe de texte ». Ainsi, je réserve div comme support pour spécifier une langue (cas rare) ou un style (cas le plus fréquent).

Sopo a écrit :
Dans le cas (d'école) où il n'y aurait pas moyen de trancher entre 2 possibilités, quelle est la meilleure solution à adopter ? utiliser p au risque d'induire le visiteur en erreur quant au contenu de la balise, ou se rabattre vers une division qui ne peut pas induire en erreur, puisqu'elle ne transmet pas d'information particulière ?

Je pense qu'on induit peu en erreur avec un élément p, contrairement à ce qui se passe avec les listes de définition par exemple.
Si on veut être plus royaliste que le roi, pourquoi pas effectivement faire la chasse aux éléments p « abusifs »... Mais le gain me semble négligeable.

Effectivement, on est dans le coupage de cheveu en quatre.

mpop a écrit :

j'utilise plutôt des paragraphes que des div, même quand il ne s'agit pas particulièrement d'un « paragraphe de texte ».

C'est sans doute une erreur de considérer <p> comme décrivant un paragraphe de texte. Celà ne correspond pas aux caractéristiques html de cette balise.

j'en ai déjà parler mais RE :

<p> est :
. De type block
. Interdisant l'imbrication d'autres block
. Rien d'autre

Toutes les autres balises partageant les 2 premiers points ont par ailleurs une autre fonction de description (on peut penser aux <hn> notamment). Pour <p> ce n'est pas le cas. <p> est la balise atomique (au sens non sécable en block) et rien d'autre.

clb56 a écrit :
<p> est :
. De type block
. Interdisant l'imbrication d'autres block
. Rien d'autre

Toutes les autres balises partageant les 2 premiers points ont par ailleurs une autre fonction de description (on peut penser aux <hn> notamment). Pour <p> ce n'est pas le cas. <p> est la balise atomique (au sens non sécable en block) et rien d'autre.

Merci pour le rappel. Ça me conforte dans mon choix de privilégier p plutôt que div pour les éléments de type bloc « en bout de chaîne », en div uniquement comme conteneur.

clb56 a écrit :
Interdisant l'imbrication d'autres block

Ce qui pourrait changer en XHTML 2.0, du moins d'après le document de travail actuel :

a écrit :
The p element represents a paragraph.
In comparison with earlier versions of HTML, where a paragraph could only contain inline text, XHTML2's paragraphs represent the conceptual idea of a paragraph, and so may contain lists, blockquotes, pre's and tables as well as inline text. Note however that they may not contain directly nested p elements.

Modifié par Alan (26 Aug 2006 - 16:54)

clb56 a écrit :


C'est sans doute une erreur de considérer <p> comme décrivant un paragraphe de texte.

HTML4.01 a écrit :
The P element represents a paragraph.

Ce qui n'engage à rien. Pas plus que le modèle de contenu %inline de cet élément : aucun des deux ne définit un modèle conceptuel précis.

mpop a écrit :

en div uniquement comme conteneur.

En conteneur de quoi ????

Qu'est ce que div ???

Au fait...

Allez Mpop dit le, tu l'as au bout de la langue, il suffit de penser à <p> et c'est évident.

<a parte>
content de voir qu'xhtml 2 confirme mon intuition.
</a parte>
Modifié par clb56 (27 Aug 2006 - 02:23)