5568 sujets

Sémantique web et HTML

[Resolu] Titre de liste à puce

Je voudrais savoir comment donner un titre à une liste à puce.
Pour le moment je fait un truc dans ce gout là :

<div id="liens">
 <h3>Mes liens</h3>
 <ul>
  <li>lien1</li>
  <li>lien2</li>
  <li>lien3</li>
 </ul>
</div>

Ce qui "gaspille" un div pour pas grand chose (il sert juste à se voir appliqué une bordure ou une couleur de fond en fait).
Modifié le 09 Jan 2005 - 19:55
Sur le lien, certains proposent d'utiliser des listes de définition.

<dl>
<dt>Mes liens<dt>
<dd>lien1</dd>
<dd>lien2</dd>
<dd>lien3</dd>
</dl>

Est-ce bonne alternative pour ce genre d'utilisation ?

L'affichage sans css n'est certes pas aussi joli qu'une liste à puce mais reste très lisible. A forciori si plusieurs groupes de liens composent le menu. Non ?
Administrateur
C'est techniquement intéressant en tout cas, mais pour ce qui est de l'aspect sémantique, tout dépend de tes données et -probablement- des libertés Smiley deal que tu es prêt(e) à prendre avec le terme "liste de définitions"

Perso, je l'ai adopté pour singer la galerie d'images (liens directs vers les chapitres de magasine avec logo du magasine en haut, 1 encadré par magasine). Vu l'association que je fais entre images et liens, y a de quoi hurler côté sémantique mais c'est pour une page perso, je suis pas webmaster ni pro Smiley cligne (c'est pas non plus une excuse mais bref Smiley confused )

C'est vraiment à toi de décider, tu connais mieux que quiconque la relation entre les éléments titre/autre ...
(Edit : nan rien ^^" je sais pas tapper c tout)

Je ne sais pas ce qui est le mieux, utiliser des divs "pour rien" ou détourner de sa fonction première une balise. J'hésite.
Modifié le 08 Jan 2005 - 22:53
Ben dans ce cas, la balise div ne sert pas à rien, elle n'est pas non plus détournée. Comme expliqué dans le billet de Laurent, le div sert à grouper des éléments, et à leur donner une certaine relation. Donc pour associer un <h3> et un <ul>, on les groupe dans une balise div :
<div>
  <h3></h3
  <ul>
    <li>...</li>
  </ul>
</div>
Plus je lis de chose, moins je sais quoi choisir. Les deux solutions me paraissent toutes deux assez mauvaises... Pourquoi n'y a-t-il pas de listes spécifiques pour un menu Smiley decu
Je pense que le concept de menu n'existe pas en HTML (4.01 et XHTML 1.0-1.1), car l'HTML n'a pas la notion de "site". L'HTML est un langage avant tout orienté page et contenu. Il faudra attendre l'XHTML 2 pour avoir un élément <nl> (navigation list).
Administrateur
FlorentG a écrit :
Je pense que le concept de menu n'existe pas en HTML (4.01 et XHTML 1.0-1.1), car l'HTML n'a pas la notion de "site". L'HTML est un langage avant tout orienté page et contenu. Il faudra attendre l'XHTML 2 pour avoir un élément <nl> (navigation list).

Une balise <menu> a quand même été créée, ainsi qu'un <lh> (list header) :
http://www.alsacreations.com/blog/index.php?2004/06/07/19-tres-cheres-disparues

http://www.la-grange.net/w3c/html4.01/struct/lists.html#h-10.4 :
W3C a écrit :
L'élément DIR était conçu pour la création de listes de répertoires multicolonnes. L'élément MENU était conçu pour les listes de menu sur une seule colonne. Les deux éléments ont la même structure que l'élément UL, seule leur restitution diffère. En pratique, l'agent utilisateur restituera une liste DIR, ou MENU, exactement comme une liste UL.

Nous recommandons fortement d'utiliser l'élément UL à leur place.


XHTML2 prévoit effectivement la "Liste de Navigation" : http://www.w3.org/TR/2004/WD-xhtml2-20040722/mod-list.html#sec_11.2.
Une bonne chose en effet de prévoir ça (90% des sites en ont l'utilité !). En attendant je vais détourner une liste de définitions qui syntaxiquement fonctionne comem je le souhaite. De toute façon j'ai du mal à voir l'utilité d'une telel liste dans un usage non détourné Smiley langue
Certes, masi dans le site de monsieur tout le monde (blog ou apparenté le plus souvent) l'usage est moins évident.
Raphael a écrit :

Une balise <menu> a quand même été créée, ainsi qu'un <lh> (list header) :
http://www.alsacreations.com/blog/index.php?2004/06/07/19-tres-cheres-disparues

Oui, mais donc dépréciée en DTD Strict. J'ai essayé de trouver les raisons pour lesquelles elles ont été dépréciées, mais je n'ai rien trouvé, à part dans les spé HTML 4.01 où ils indiquent que :
W3 a écrit :

'élément DIR était conçu pour la création de listes de répertoires multicolonnes. L'élément MENU était conçu pour les listes de menu sur une seule colonne. Les deux éléments ont la même structure que l'élément UL, seule leur restitution diffère. En pratique, l'agent utilisateur restituera une liste DIR, ou MENU, exactement comme une liste UL.

Ce qui est un peu fumeux, vu que la balise <menu> a plus de sens qu'une balise <ul>... Ca aurait été pas mal surtout pour les moteurs de recherche qui auraient pu en premier lieu chercher un élément <menu> dans une page pour parcourir un site entier.
Administrateur
a écrit :
Oui, mais donc dépréciée en DTD Strict

Hors strict point de salut Smiley murf
FlorentG a écrit :
Ce qui est un peu fumeux, vu que la balise <menu> a plus de sens qu'une balise <ul>... Ca aurait été pas mal surtout pour les moteurs de recherche qui auraient pu en premier lieu chercher un élément <menu> dans une page pour parcourir un site entier.


Pour ça, il y a :



<link rel="start" href="..." title="..." />
<link rel="index" href="..." title="..." />
<link rel="glossary" href="..." title="..." />
<link rel="chapter" href="..." title="..." />
<link rel="section" href="..." title="..." />
<link rel="up" href="..." title="..." />
<link rel="first" href="..." title="..." />
<link rel="last" href="..." title="..." />

etc.

Smiley cligne
FlorentG a écrit :

Oui, mais donc dépréciée en DTD Strict.


Attention: seul <menu> est déprécié (et donc parfaitement utilisable pour ceux qui sont en transitional). <lh> n'a jamais existé normativement (il ne figure que dans un "document de travail" du W3C, qui n'a jamais été finalisé en tant que recommandation).

FlorentG a écrit :

J'ai essayé de trouver les raisons pour lesquelles elles ont été dépréciées, mais je n'ai rien trouvé, à part dans les spé HTML 4.01...


C'est à la fois une question d'économie et de rôle des éléments HTML : il n'y avait pas de différence **structurelle** entre <menu> et <ul> justifiant deux éléments distincts, mais uniquement l'ajout d'une information qui relève du mécanisme des attributs. <ul class="navigation">, ou <ul id="navigation">, ou encore <ul title="navigation"> véhiculent exactement la même information (métadonnée) que <menu>, de manière plus respecteuse de la nature des éléments HTML.

A titre de comparaison, <menu> et <ul> posent un peu le même problème que si on différenciait deux éléments de liens:
- <a href="..."> pour le protocole HTTP
- un <mailto href="..."> pour le protocole maito, au lieu du <a href="mailto:..."> actuel.
(Ce qui conduirait d'ailleurs à créer aussi <ftp href="...">, <news href="...">, etc)

Cet exemple des <a> montre un autre problème posé par <menu>: un système figé, non extensible, et qui aurait toutes les chances de poser des problèmes de compatibilité avec de nouvelles normes.

Dans le cas imaginaire des <maito:>, <ftp:>... etc, on voit bien en effet qu'il devient impossible d'introduire un nouveau protocole sans avoir à modifier HTML...

En revanche, avec <a href="mailto:...">, HTML ne prédéfinit pas ce qui n'est pas de son ressort (principe d'orthogonalité entre les spécifications). De même, les <link rel="..."> sont extensibles à l'infini, comme en témoigne la récente introduction dans les navigateurs, agrégateurs, lecteurs RSS, etc. du :
<link rel="alternate" type="application/rss+xml" title="RSS" href="..." />


Smiley cligne
Modifié le 10 Jan 2005 - 06:49
Laurent Denis a écrit :

C'est à la fois une question d'économie et de rôle des éléments HTML : il n'y avait pas de différence **structurelle** entre <menu> et <ul> justifiant deux éléments distincts, mais uniquement l'ajout d'une information qui relève du mécanisme des attributs. <ul class="navigation">, ou <ul id="navigation">, ou encore <ul title="navigation"> véhiculent exactement la même information (métadonnée) que <menu>, de manière plus respecteuse de la nature des éléments HTML.

Je pense tout de même que d'un point de vue sémantique, un <menu> a plus de sens qu'un <ul id="menu">. Un id (ou class, ou title) n'a pas de sens pour un logiciel, par exemple un moteur de recherche. S'il est programmé pour rechercher les title="navigation", les développeurs qui auraient plutôt choisi title="menu" ou title="nav" aurait un résultat différent qu'avec un title="navigation", même si le sens est le même.
Laurent Denis a écrit :

Cet exemple des <a> montre un autre problème posé par <menu>: un système figé, non extensible, et qui aurait toutes les chances de poser des problèmes de compatibilité avec de nouvelles normes.

Pourtant, un élément <nl> (navigation list) a été introduit en XHTML2. Mais je suis tout de même d'accord qu'un élément <menu> est moins extensible qu'un <nl>. Par exemple pour un page "plan de site", un <menu> n'y aura pas sa place, par contre un <nl> sera approprié
Smiley smile
J'aimerais ben avoir votre avis sur la façon d'organiser un menu contenant des rubriques et des sous-rubriques.

J'ai pensé l'organiser de cette manière, en imbriquant 2 listes :


<ul id="mainmenu">
 <li><h3>Categorie 1</h3>
   <ul class="submenu">
     <li>sous-categorie</li>
     <li>sous-categorie</li>
     <li>sous-categorie</li>
   </ul>
 </li> 
 <li><h3>Categorie 2</h3>
   <ul class="submenu">
     <li>sous-categorie</li>
     <li>sous-categorie</li>
     <li>sous-categorie</li>
   </ul> 
 </li> 
 <li><h3>Categorie 3</h3>
   <ul class="submenu">
     <li>sous-categorie</li>
     <li>sous-categorie</li>
     <li>sous-categorie</li>
   </ul>
 </li> 
</ul>


Je ne m'etais jamais penché sur la question des listes imbriqués en fait. Par encore fait de recherche sur le sujet non plus, donc si vous avez une opinion sur la question.
Modifié le 14 Jan 2005 - 04:34
Sujet clos
Aller à