Tiens, j'oublais: ce billet ne dit finalement rien des menus en liste de définition... pour la simple raison que la conclusion est qu'ils sont inutiles et illusoirement sémantiques.

Bonjour,

> En l'état actuel de l'art, pouvions-nous faire mieux ?

Non, je ne crois pas.
Il faudra attendre XHTML 2.0 et le "List module" www.w3.org/TR/xhtml2/mod-...

Amicalement,
Monique

C'était plus ou moins le sens de cette remarque, en effet

Quoique XHTML2.0 ne fait peut-être que déplacer le problème.

Il m'énerve…
Je voulais faire un article sur les bonnes idées du HTML 3.0 va falloir que je m'active maintenant

"ce billet ne dit finalement rien des menus en liste de définition... pour la simple raison que la conclusion est qu'ils sont inutiles et illusoirement sémantiques"

>> Je comprends que tu aimes aller contre les modes de toutes sorte. Ce qui est dommage c'est que tu restes toujours sur tes positions alors que plusieurs éléments ont bien montré qu'elles n'étaient ni inutiles (dans ce cas précis), ni illusoirement sémantique.
M'enfin... c'est ton avis donc il n'y a pas lieu de revenir dessus.

Bonsoir,

un article fort intéressant comme toujours.

Cependant, j'ai une petite question : Si je désire mettre un lien sur le un nom de rubrique, dois-je procède comme ceci ? :

<div title="menu" id="menu">
<h1>Navigation</h1>
<div>
<h2><a...>Rubrique 1</a></h2>
<ul>
...

@Raphael> il s'agit de bien autre chose que d'aller "pour" ou "contre" une mode !

Allez : quel est l'apport spécifique d'une liste de définition dans un menu de navigation:
1. du point de vue de la "machine" ?
2. du point de vue de "l'utilisateur" ?

... le (1) n'ayant pour raison d'être que de travailler pour simplifier la vie du (2), et le tout ne détournant pas la norme nécessaire et souvent frustrante ?

@Bouda > "donne-moi un contenu, et nous regarderons comment le structurer."

Il n'y a aucune réponse à ta question en dehors de la nature de ton contenu précis.

J'ai réalisé le menu de la maquette de mon site comme suit, et j'aimerais tester ton idée :

<div id="nav">
<ul>
<li><a href="#">Section 1</a>
<ul>
<li><a href="#">Sous-section 1.1</a></li>
<li><a href="#">Sous-section 1.2</a></li>
</ul>
</li>
<li><a href="#">Section 2</a>
<ul>
<li><a href="#">Sous-section 2.1</a></li>
<li><a href="#">Sous-section 2.2</a></li>
</ul>
</li>
</ul>
</div>

Merci,
Antoine.

"Allez : quel est l'apport spécifique d'une liste de définition dans un menu de navigation:
1. du point de vue de la "machine" ?
2. du point de vue de "l'utilisateur" ?"
>> Cela a été discuté ici-même : forum.alsacreations.com/t...

En l'état actuel du XHTML 1.0, les listes de définition couvrent un manque flagrant. Leur champ d'action autorisé par le W3C est large et leur efficatité l'est également : plutôt que d'utiliser des balises génériques ou des titres de section, la structure en DL est très claire : titre / élément se rapportant au titre.

C'est marrant cette question qui revient tout le temps... <dl> pour les menus... hmmm

Laurent tu dis grosso modo que c'est totalement inadapté pour les menus, bon c'est un avis, je trouve que c'est quand même bien pratique de temps en temps à défaut d'un balisage adapté (inexistant), et ce que je trouve le plus rigolo, c'est que tu as autant d'ardeur à être contre qu'a les cloner avec des <div> dans ton exemple !!

Franchement, l'utilisation des listes de definitions revient au même (mieux ? ) que ton exemple à base de <div>...

Pour ce qui est du phénomène de mode des <dl>... le xhtml est une mode aussi en ce moment, tu vas le proscrire pour autant ? Il n'y a pas que des mauvaises choses dans les "modes" et certe il y a des abus dans l'utilisation des <dl> (Genre pour faire un cadre arrondi [smiley_sifflotant]), mais il y a d'autres utilisations tout à fait adapté en l'état actuel des choses, et peut être vaudrait-il mieux "taper" sur les pires utilisations ?

J'ai une idée. Plutôt que de maintenir à la fois une liste des ressources dans le menu et dans les balises link, pourquoi ne pas spécifier quelque chose comme <link rel="navigation" href="#menu"/>.

Ceci pourrait d'une part remplacer les liens d'accessibilité en début de page, permettre comme tu le proposes de sortir la navigation du contenu, même si la solution actuelle reste possible, et enfin permettre grâce à une reconnaissance sémantique de la structure de l'élément de navigation indiqué la génération d'un menu de navigation au niveau du navigateur.

@Raphael> la structure en dl est très claire en effet... sauf que dt n'est pas un élément de titrage, n'est pas reconnu comme tel, et qu'un intitulé de rubrique n'est pas "défini" par les items de menu correspondant.
La relation marquée par un titre <h?> est de définir ce qui le suit... La relation marquée par <dt> est l'inverse.

@ElMoustiko > les "modes" sont mêmes utiles, car elles permettent de tester l'utilisation des éléments HTML. Et de conclure parfois qu'il y a des usages à éviter

"@Raphael> la structure en dl est très claire en effet... sauf que dt n'est pas un élément de titrage, n'est pas reconnu comme tel, et qu'un intitulé de rubrique n'est pas "défini" par les items de menu correspondant.
La relation marquée par un titre <h?> est de définir ce qui le suit... La relation marquée par <dt> est l'inverse."

>> Pourtant nous savons que le terme de D"efinition Title" n'est pas à prendre au sens strict.

Le W3C lui-même : "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."

Désolé de revenir là-dessus, mais il parait très clair que l'emploi des DL ne se limite pas à une "définition" au sens premier.

Peut-être est-ce tout simplement le nom de la balise qui aurait dû être différent pour ne pas verser dans un purisme excessif.

La spécification est en effet très ambigüe sur la nature de <dl>:
- est-ce un élément de texte spécifique marquant cette relation "terme défini" <-> "définition" ?
- est-ce un élément de structuration générique marquant une simple relation "quelque-chose" <-> "quelque-chose" ?
Le second cas reviendrait en fait à dupliquer l'élément générique déjà existant, qui est <div>.

En conclusion, l'usage de <dl> pour les menus n'est pas contraire à la lettre de la spécification (il est formellement valide), mais repose sur un flou créé par la spécification. A l'inverse, une structure appuyée sur <div> ne fait qu'exploiter des éléments au rôle beaucoup plus clair.

Cela dit, ce qui m'intéressait ici n'était pas la question des <dl>, mais plutôt le problème de fond des menus de navigation: leur redondance avec les métadonnées <link>.

Tout d'abord un point. Quand tu dis que ça manque de structure et que tu rajoutes un <div> autour de chaque titre+item, quel est ton but ? certes le fonctionnement des titres est plat, non hiérarchique, mais c'est un choix du langage que d'utiliser cette structure plate. Il n'y a aucune raison de rajouter un div alors que les titres sont concus pour ne pas en avoir.

Maintenant, si j'ai toujours été partisant d'utiliser des titres réels plutot que séries de dl partout, les utiliser pour les menus peut poser un problème. Il faut penser que les menus apparaissent dans les explorateurs de menus. Là la question est "est-ce profitable ou pas à l'utilisateur que de mélanger des titres de menu et des titres de contenu ?"
M'est avis que dans l'explorateur de titre, l'essentiel des titres devraient être des titres de contenu, ne pas flooder l'utilisateur avec plein d'informations annexes. On peut rajouer un titre "menu" mais si on détaille trop on risque de plus perturber la navigation que de l'aider.
Je n'aime pas les dl pour ce genre de choses, mais c'est peut être ce qui fait le moins de mal.

(note: si le menu est le contenu de la page, ma réflexion s'inverse est c'est alors des titres qu'il faut utiliser)

"Quand tu dis que ça manque de structure..." En fait, je me contente d'indiquer ce qui semble être la réponse appropriée à ceux qui trouvent qu'un menu devrait avoir "plus de structure". Il en est de même du besoin de titrer systématiquement les rubriques de menu. Mais je ne dis pas pour autant que ce besoin soit, de mon point de vue personnel, justifié.

C'est l'une des raisons pour lesquelles cet article est une première partie, et va être suivi d'un second billet

Cela dit, je ne suis pas aussi sûr que toi que les titres <h?> soient "conçus" pour ne pas être associés à des <div>: le rôle donné explicitement aux <div> par la spécification me semble plutôt aller dans ce sens, en fait: "rajouter de la structure", et "regrouper des éléments".

> Plutôt que de maintenir à la fois une liste des ressources dans le menu et dans les balises link, pourquoi ne pas spécifier quelque chose comme <link rel="navigation" href="#menu"/>.

Ca me semble une très bonne idée.

> Pourtant nous savons que le terme de D"efinition Title" n'est pas à prendre au sens strict.
> Le W3C lui-même : "Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words."
> Désolé de revenir là-dessus, mais il parait très clair que l'emploi des DL ne se limite pas à une "définition" au sens premier.

On peut dire qu'une personne est (en partie) définie par son discour, donc, c'est là encore le contenu du dd qui définit le contenu de dt.

Ceci dis, il me semble que dl est plus adapté que ul, on peut très bien avoir par exemple :

<dl title="menu" id="menu">
<dd><h1>Navigation</h1></dd>
<dd>
<dl>
<dd><h2>Rubrique 1</h2></dd>
<dd>
<dl>
...
</dl>
</dd>
</dl>
<dl>
<dd><h2>Rubrique 2</h2></dd>
<dd>
<dl>
...
</dl>
</dd>
</dl>
</dd>
</dl>

Chaque éléments dd définice la liste de définition avec l'id="menu", chaque élément du menu définissent ce menu, c'est donc une bonne utilisation d'une liste de définition pour un menu. Personnelement, je ne vois pas pourquoi on utiliserais une liste à puce pour un menu, surtout si c'est pour effacer les puces en css, les listes de définitions me semble donc plus apropriée, note que, une liste ordonnée pourrais convenir aussi si on n'a l'intention de numéroté le menu de navigation comme un chapitrage.

Par ailleurs, tout comme Ganf, je me pose aussi des questions sur l'utilisation de h? dans un menu, en dehors de ce qu'il a déjà souligner, je me dis que ça donne peut-être trop de poid au contenu du menu pour des bots de moteurs de recherche par exemple, enfin, les h? définisse des section d'une page, pas des pages entière, or, en général, un menu est composé de liens vers des pages entière.

Enfin, pourquoi ne pas utiliser les balises link pour faire un menu à l'aide de
link {display:...}

Peut-être parce qu'on ne peux pas faire de lien à partir des balises link sans avoir recours à des CSS propriétaire.

Je n'ai ni essayeé, ni creusé la question, je ne sais donc pas trop ce qu'il en est, ce serais peut-être bien (dans le deuxième article ?) d'aborder le sujet.

@Gloom> En l'absence d'élément <dt>, une liste <dl> ne définit rien du tout. Utiliser des listes de définition sans <dt> relève du non-sens.

D'autre part, un élément <h?> sert à donner un intitulé à une section, pas à la définir. Et le fait qu'un menu soit composé de liens vers des "pages entières" n'a aucun rapport avec le fait que ces liens forment une portion de contenu comme une autre, tout aussi susceptible d'avoir un intitulé.

La solution de Bouda (listes imbriquées) me paraît pour l'instant être la plus appropriée. Cela nous dispense d'utiliser les imprécisions des spécifications du w3c sur les listes de définition.

D'autre part il y a bien un rendu hiérarchique valable et compréhensible (telle sous-section "appartient/fait partie" de telle section).

Et puis c'est assez facile à mettre en forme, et ça le serait encore plus avec un support correct des sélecteurs css par tous les navigateurs.

ba je me réimmisce dans cette discussion sur les dl qui va surement finir par agacer prodigieusement Laurent Denis

Je suis assez proche de la position de raphaël sur ce que l'on peut tirer de la relation <dt>/<dd>. Le raisonnement serait le suivant : une relation est établie entre un terme <dt> et un (des) item(s) qui lui correspond(ent) <dd>, cette relation peut être pensée sur un mode analogue à celui établi entre un mot et une série de définition qui lui correspondent.

Sémantiquement c'est peu mais est ce rien ?

à Laurent Denis :

Tu avances souvent l'argument de l'absence de gain de sens dans l'utilisation de dl pour les menus (entre autre) mais il n'y a là finalement rien de définitif (l'argument définitif consisterait plutôt à monter un risque de perte de sens).

Concernant la structuration par titre je suis par contre d'accord qu'elle doit apparaitre. Mais dans ce cas la forme suivante me paraitrait suffisante :

<h2>Ici la section des menus</h2>
et (par exemple)
<dl>
<dt>menu1</dt>
<dd>lien1</dd>
.
.
</dl>
<dl>
<dt>menu2</dt>
.
.

ou pour une forme plus condensée
<dl>
<dt>menu1</dt>
<dd>...
.
<dt>menu2</dt>
<dd>...
.
</dl>

<h2>Ici la section contenant le contenu :-)</h2>

sans rien présupposer de la position relative des deux <h2> dans le document HTML.

@clb56> ça ne m'agace pas : je n'ai pas écrit cet article en pensant spécifiquement aux listes de définitions, mais l'utilisation de celles-ci repose sur des contre-arguments infondés à l'idée essentielle, qui est (2e partie de l'article à paraître) :
- qu'un menu de navigation n'est pas un plan de site (ça se fait dans un plan de site);
- qu'un menu de navigation n'est pas une table des matières (ça se fait dans une table des matières);
- qu'un menu de navigation n'est pas une indication des liens sémantiques entre des ressources (ça c'est <link> qui le fait, voir ci-dessus)

Bref, qu'un menu de navigation n'a pas, en tout état de cause, besoin de cette complexité de structure souvent demandée, et que j'ai reprise à mon compte dans ce premier billet.

Une fois ôté ce besoin à mon sens abusif... il reste une structure minimale très simple à mettre en place, qui ne nécessite aucun "sectionnage" ou "titrage". Et en aucun cas une structure pseudo-hiérarchisée du type liste de définition.

Voilà, j'ai dévoilé la suite

Ah si... On parlera aussi des menus déroulants, une autre véritable horreur :D

> Bref, qu'un menu de navigation n'a pas, en tout état de cause, besoin de cette complexité de structure souvent demandée, et que j'ai reprise à mon compte dans ce premier billet.
> Une fois ôté ce besoin à mon sens abusif... il reste une structure minimale très simple à mettre en place, qui ne nécessite aucun "sectionnage" ou "titrage". Et en aucun cas une structure pseudo-hiérarchisée du type liste de définition.

Alors :
<p id="menu"><a href="bla.htm">Bla</a> <a href="bli.htm">Bli</a> ...</p>

On peut faire joli en css, par exemple (c'est volontairement très simple) :
p#menu {
border-bottom:solid 1px;
}
p#menu a {
border:solid 1px 1px 0 1px;
}

C'est bien plus simple que des listes. Mais bon, compliquons un peu en s'inquiettant de l'accessibilité :
html :
<p id="menu"><a href="bla.htm">Bla</a><span>,</span> <a href="bli.htm">Bli</a><span>,</span> ...</p>

css :
p#menu {
border-bottom:solid 1px;
}
p#menu a {
border:solid 1px 1px 0 1px;
}
p#menu span {
display:none;
}

je me permet de rebondir sur la remarque : "un menu de navigation n'est pas un plan de site".

J'avance l'hypothèse suivante : est ce que le plan d'un site n'est pas finalement le seul vrai menu d'un site. Là où toutes les pages sont directements accessibles, où toutes les inter relations sont visibles,où les commentaires sont présents en dur.

Bonjour Laurent,

Très intéressant tout ça.

J'avais il y a quelque temps écrit un article sur la question :

blog.empyree.org/?2004/09...

À l'époque, tu n'avais pas encore publié cette page.

Est-ce que ce que tu indique résoud mon problème ?

David : je dirais que oui, à une réserve près. Un titre est bien approprié pour annoncer le contenu de ce qui le suit, la liste dans ton cas. Mais il ne sera pas spécifiquement pris en compte comme le <caption> que tu envisages. Par exemple, dans un lecteur d'écran, aucun mode de navigation spécifique aux listes ne permettrait de remonter de l'intérieur de la liste à ce caption... (Il n'existe pas de mode de navigation spécifique aux listes, en fait, justement parce que ce <caption> ou <lh> n'existe pas).

Qu'est ce que tu fais debout à cette heure-ci ?

Merci pour la réponse

De fil en aiguille, j'arrive sur ce billet... après quelques soucis de CSS concernant un menu, au travers desquels vos lumières ont favorisé mon apprentissage.Si, je résume, pourquoi se compliquer la vie si cela n'a pas de valeur sémantique au niveau du langage ?

En ergonomie cognitive, un menu de navigation permet à l'internaute de fixer le cadre de référence du site qu'il s'apprête à visiter ... disons, un sommaire alors ? L'écran étant vu comme un tunnel par rapport au livre.