5568 sujets

Sémantique web et HTML

Bonjour / Bonsoir à tous,

Voilà une question simple:
je rencontre tout le temps cet usage, mais au final je m'interroge sur les raisons de l'utilisation systématique d'une liste pour faire un menu.

Merci de vos éclaircissements...
Un menu est une énumération de lien, et la liste une enumération d'éléments, tu commences à voir le rapport?
Sur le principe, pourquoi pas.

Dans la pratique j'ai plus de code à faire ça :

 <div class="menu_local">
	<span class="titre_rubrique">Titre Menu</span>
	  <ul>
	<li> <a href="#">L'essentiel</a></li>
	<li> <a href="#">Nos métiers</a></li>
	<li><a href="#">Notre Histoire</a></li>
	<li> <a href="#">Chiffres clés</a></li>
	<li> <a href="#">Organisation</a></li>
	<li> <a href="#">Actionnariat et participations</a></li>
	</ul>
  </div>
</div>


que ça :

<div class="menu_local"><span class="titre_rubrique">Titre Menu</span>
		<a href="#" >L'essentiel</a>
		<a href="#" >Nos métiers</a>
		<a href="#" >Notre Histoire</a>
		<a href="#" >Chiffres clés</a>
		<a href="#" >Organisation</a>
		<a href="#" >Actionnariat et participations</a>
		</div>


Et le résultat, -dans mon cas de figure en tout cas- est le même, j'applique mes retraits et mon interligne dans ma div et voilà...
Bonjour,
Dans l'exemple que tu donnes : utiliser un span pour l'utiliser en tant que titre, c'est pas bon, ce serait mieux d'utiliser un élément <hx>.

Sinon à part ça, je pense aussi qu'on utilise des <ul> en attendant le débarquement du XHTML2 et <nl>. ET comme <menu> est deprecated...
Modifié par QuentinC (21 Nov 2005 - 21:47)
Merci pour ta réponse quentin, ce n'était pas la question mais bon Smiley cligne

En fait, j'ai redefini mes <hx> pour le contenu principalement.

Est ce qu'il faudrait que je fasse quelque chose comme ça à la place du span? :

.menu_local h1 {
    color:#000;
	font-weight:bold;
	padding-left:23px;
}
Sinon, pour aller un peu plus loin il y a d'autres bonnes raisons d'utiliser les liste de liens :
- Séparer les liens adjacents comme indiqué dans les bonnes pratiques opquast.
- Créer une hiérarchie d'éléments très utiles pour les styler avec CSS.
Modifié par Lanza (22 Nov 2005 - 16:52)
Ca c'est du n'importe quoi, de dire que les synthèses vocales ne font pas de pause entre deux liens adjaçants. C'est une pure invention.
a écrit :
Ca c'est du n'importe quoi, de dire que les synthèses vocales ne font pas de pause entre deux liens adjaçants. C'est une pure invention.


Cette item du WCAG 1.0 concernait les difficultés des permières versions des lecteurs d'écrans qui ne parvenaient pas à marquer la pause.
D'où l'iddée de séparer les liens adjacents par un caractère imprimable, forcément lu par le lecteur et qui le forçait à "simuler" une pause.

Ce n'est plus le cas

On peut donc raisonnablement oublier cet item, en prenant soin néanmoins d'implémenter au moins espace.

Pourquoi des listes de liens au lieu de contenu anonyme stylé par CSS ???

D'abord pour la plus value sémantique de l'élément ul, élément de liste qui sert donc à regrouper sous une même "thématique" des éléments généralement de même nature.

Un menu est bien le regroupement thématique d'élément de même nature, donc l'élément de liste ul est particulièrement indiqué pour prendre en charge cette implémentation.

En second lieu parce que, cet élément est connu des technologie d'aides comme un lecteur d'écran et traité comme tel.

En recontrant une liste, le lecteur d'écran va annoncer quelque chose comme : "liste, 5 item, item1 : blablabla, item2 blabalabla"...

Ce qui facilitera d'autant l'identification par l'utilisateur.

Remarque également vrai pour tout autre logiciel, robots, moteur de recherche documentaire...

Ensuite parce que faute d'utiliser un élément de liste, ta ljolie liste, ne sera plus une liste une fois les CSS désactivée.

Et puis dans le fond, un menu c'est bien une liste de liens non ?
Alors pourquoi essayer de reproduire avec CSS quelque chose qui est fait pour ça et qui existe déjà ?

Enfin l'argument de l'économie de code est très fragile, surtout si tu essaie de reproduire des listes imbriquées...

Jean-pierre

Note : Je n'avais quel quelques minutes, il y à bien d'autres arguments encore, je compte sur ceux qui savent pour ne pas s'économiser... Smiley smile Smiley smile
JPV > Merci pour la WCAG info. Et en effet les lecteurs d'écran annoncent : "Liste de x éléments" et une pause très perceptible est faite entre chaque item.
Merci à tous pour vos précisions, je viens par ailleurs de lire un billet de Raphaël qui va dans le même sens.
Note : l'intérêt des listes est tout simplement aussi de faire une liste qui s'affiche comme tel quand la CSS ne peut plus être accédée... sinon tous tes liens sont les uns à la suite des autres...

Tu peux utiliser les listes de définition (<dl><dd>...) pour ce faire.