[résolu] Dilemme sémantique dans la structuration d'une liste de lien

Bonjour,

Je dois placer sur une page différents liens invitant à consulter des artcicles.
J'ai donc opter pour une liste à puce comme celle-ci.

<ul>
      <li>
           <a href="urlarticle"><img src="" alt="" /></a>
	   <h5><a href="urlarticle">Titre de l'article</a></h5>
	   <p>début description article</p>
      </li>
      <li>
           <a href="urlarticle2"><img src="" alt="" /></a>
	   <h5><a href="urlarticle">Titre de l'article2</a></h5>
	   <p>début description article2</p>
      </li>
</ul>

Remarque: début description article peut faire +/- 300 caractères.

Mais en réalisant les CSS, je me rends compte qu'il serait préférable que tous les éléments du <li> soient cliquables (autrement dit, que le <li> devienne une zone cliquable)
Je pourrais donc opter pour:

<ul>
      <li>
           <a href="urlarticle"><img src="" alt="" /></a>
	   <h5><a href="urlarticle">Titre de l'article</a></h5>
	   <p><a href="urlarticle">début description article</a></p>
      </li>
      ...
</ul>

Avec l'inconvéniant que je répète trois fois le même lien et qu'un a:hover n'agit que sur un lien et pas l'ensemble des élément du <li>

Une autre possibilité pourrait être de coder ainsi.

<ul>
      <li>
           <a href="urlarticle">
              <img src="" alt="" />
              <span>Titre de l'article</span>
              <span>début description article</span>
           </a>
      </li>
      ...
</ul>

Dans ca cas-ci, j'arrive au résultat souhaité avec un minimum de balise. Par contre, il y a une perte au niveau de la sémantique. Le <h5> et le <p> sont devenus de simples <span>.

J'aimerais donc avoir votre avis sur deux points:

- Est-ce un réel plus ergonomique que l'ensemble du <li> soit cliquable ?
- Si oui, laquelle des deux approches est le meilleur compromis entre économie de bande passante, sémantique, référencement et accessibilité ?

Merci pour votre aide.
Modifié par Mathieu_vd (24 Aug 2006 - 13:07)

Bonjour,

Je n'ai pas regardé le détail, mais rapidement :
- le <h5> du premier exemple de code est à ne pas faire (<h> qui n'est pas un titre de section dans la page, plutôt apparemment un balisage pour donner du poids à un lien)
- attention à ne pas multiplier les liens identiques et à ne pas rendre tout cliquable :un seul lien vers l'article, avec un libellé (ou un alt) explicite, précédant ou suivant l'abstract, sont seuls nécessaires. Plus crée de la confusion, des difficultés d'accessibilité, d'ergonomie, etc.

Il me semble que des intitulés de liens trop longs ne sont pas vraiment une bonne pratique, notamment d'un point de vue accessibilité.

Rendre tout un paragraphe comme lien ne sera pas très pertinent, il est important de choisir comme intitulé de lien un contenu significatif de ce que l'on va trouver derrière.

Dans ton cas, une bonne pratique serait donc de ne rendre que le titre de l'article comme lien vers la ressource (en présumant que l'intitulé du titre est pertinent et explicite vis-à-vis de la ressource liée)

Si ensuite la mise en forme de tes liens se distingue suffisamment, ça ne pose aucun problème d'ergonomie, les gens sauront ou cliquer

Sinon une autre pratique courante consiste à rajouter un lien du style "lire la suite..."

Alors personellement :
Je déconseille la troisième méthode, c'est pas très pertinent.
La deuxième, c'est pas terrible non plus, il y a trois liens d'affilée qui mènent au même endroit, ça risque d'être un peu lourd avec la touche tab.

Alors mon idée :
Soit conserver le titre cliquable et uniquement le titre. Dotclear le fait, et ça fonctionne très bien. Par contre, je serais d'avis à virer la liste si tu gardes le titrage, ça fait un peu trop.
Tu peux également, en complément, ajouter un lien du type lire la suite. ATtention cependant à ne pas répéter le même texte. (p.ex. évite le simple "lire la suite" et propose plutôt quelque chose comme "lire la suite de l'article « la reproduction des abeilles sur les îles Galapagos »")

Pourquoi ne pas cumuler liste <ul> et titres <hn> ?

J'aime assez encadrer un titre et son contenu par une <div> :

<div>
<h2>Titre 1</h2>
<p>Contenu 1</p>
</div>
<div>
<h2>Titre 2</h2>
<p>Contenu 2</p>
</div>

Néanmoins l'utilisation d'une liste me parait bien souvent plus pertinente :

<ul>
<li>
<h2>Titre 1</h2>
<p>Contenu 1</p>
</li>
<li>
<h2>Titre 2</h2>
<p>Contenu 2</p>
</li>
</ul>

Modifié par 84mickael (19 Aug 2006 - 00:48)

Merci pour toutes ces réponses !

QuentinC et Laurent Denis n'ont pas l'air d'accord sur l'utilistaion d'un Hn ici.

Laurent Denis a écrit :

le <h5> du premier exemple de code est à ne pas faire (<h> qui n'est pas un titre de section dans la page, plutôt apparemment un balisage pour donner du poids à un lien)

Dans ce cas-ci, ne peut-on pas considérer chaque <li> comme une section
dont le h5 est le titre ?

QuentinC a écrit :

Par contre, je serais d'avis à virer la liste si tu gardes le titrage, ça fait un peu trop.

Dans ce cas, je préfère garder la liste et me passer du titre. Mais cela rend peut-être le contenu de la liste trop plat (le titre et l'article sont au même niveau dans la lsite)
Si je n'utilise pas de hn, je le remplace par quoi ? (p ?, div ?,...)

QuentinC a écrit :
...conserver le titre cliquable ...en complément, ajouter un lien du type lire la suite.

Dans ce cas, j'aurai deux liens vers la même page... Cela à l'air de gêner pas mal de monde...

QuentinC a écrit :
...évite le simple "lire la suite" et propose plutôt quelque chose comme "lire la suite de l'article « la reproduction des abeilles sur les îles Galapagos »"

Je manque de place pour reprendre tout le titre de l'article. Par contre, je compte le placer dans le title...

Voici une modification du code en fonction de vos remarques. J'hésite encore beaucoup sur la pertinance ou non d'un hn.

<ul>
      <li>
          <img src="" alt="" />
          <p>Titre de l'article</p>
          <p>début description article</p>
           <a href="urlarticle" title="Lire la suite de l'article: Titre de l'article">Lire la suite...</a>
      </li>
      ...
</ul>

"Stronger" le titre serait sans doute un moyen de mettre en avant celui-ci sans le placer dans un hn, non ?

<p><stong>Titre article</strong></p>

Ou alors j'interprète de nouveau mal le sens sémantique de la balise...
Modifié par Mathieu_vd (19 Aug 2006 - 12:22)

Bonjour,

Quelques questions-guides:
- à quoi va servir la liste <ul> ? Dans quel scénario d'utilisation générique va-t-elle apporter une information nécessaire ?
- à quoi va servir le titre <hn> ? etc.
- à quoi va servir le <strong> ? etc.

Des éléments de réponses:
- listes et titres sont redondants
- la liste est générique, le titrage est spécifique
- l'emphase est générique, le titre est spécifique
- le titre se prête aux exploitations les plus nombreuses

Ce que je cherchais et dont j'ignorais l'existence, c'est plutôt le script LightBox v2.0, mais qui semble être un peu lourd. Qu'importe j'ai trouvé un bon article à ce sujet. Bref, revenons-en à nos moutons.

Tout comme Mathieu_vd, je n'arrive pas à me persuader que

<div>
<h2>Titre</h2>
<p>Contenu</p>
</div>

est forcément mieux que

<ul>
<li>
<h2>Titre</h2>
<p>Contenu</p>
</li>
</ul>

C'est grave docteur ?
Modifié par 84mickael (19 Aug 2006 - 14:45)

Salut,

clb56 a écrit :
(...) en quoi dans ce cas précis le rajout de liste entraine un gain justifiant l'alourdissement du code.

J'aurais dis quasiment la même. Si par exemple, j'ai 4 paragraphes dans 1 div, je ne vais pas pour autant faire une liste de paragraphes. En fait, je détermine la sémantique uniquement par rapport au contenu et non par rapport à la structure ou aux entités.

Dans le cas d'une galerie photos, si mon contenu parle des... gloomiths de couleurs différentes, je fais une liste parce que je ne cause que de gloomiths... Si c'est mes photos de vacances (j'aime bien photographier n'importe quoi ) et qu'aucun des éléments de mon contenu n'a de lien précis avec les autres, je mets des div. On ne parle pas là des entités (une liste de photos) mais bien de ce qui est écrit.

A mes yeux, le (x)html n'est là que pour refléter au mieux le contenu qu'il... contient ! (sorry, je ne trouve pas mes mots )
Modifié par koala64 (19 Aug 2006 - 19:23)

Bonjour et merci à tous ceux qui participent à cette discussion.

Voici le pourquoi du comment de mon code.

- Je veux créer une zone sur une home page qui présente les 3 dernières news rédigées.

- Chaque news possèdent un titre, une image illustrative et d'un contenu rédactionnel.

- J'ai donc créé un bloc qui contient un titre "Les trois dernières news" et la liste des 3 dernière news.

- Chaque élément de la liste se compose donc du titre (d'où mon utilisation d'un hn p.e. erronée), d'une miniature de l'image et des x premiers caractères du contenu. De plus, un lien vers la page de la news vient compléter l'ensemble.

Si je ne devais présenter qu'une seule news ma structure (titre + img + texte + lien) serait la même. Je ne vois pas pourquoi le fait de placer ces informations dans une liste devrait modifier cette structure.
De même, si je voulais placer uniquement les liens vers les 3 news en home, je les placerais normalement dans une liste.

Bref je pense (pensais ?) que l'utilisation d'une balise ne doit pas être influencé par la structure de son contenu mais uniquement par le sens de celui-ci (J'espère que j'arrive à me faire comprendre )

J'essaye donc d'avoir une vue de la structure de ma page la plus abstraite possible. Si l'utilisation d'une liste comme celle-ci se justifie:

[ list ]
      [ elem1 ]
      [ elem2 ]
      [ elem3 ]
[ /list ]

Je ne vois pas en quoi la nature des elem devrait remettre en question la nature de la liste.

Maintenant, en examinant ma page avec le CSS désactivé, une structuration des 3 dernières news en liste semble ne pas avoir beaucoup d'intérêt.
Autant la structure d'un menu en liste de lien apporte un plus indéniable à la lisibilité du document, autant cela semble inutile dans le cas qui nous occupe.

Si, par ailleurs, un tel balisage n'apporte rien au niveau du référencement, de l'ergonomie ou de l'accessibilité, il faut bien admettre qu'il ne contribue qu'à alourdir la page.

En conclusion , je ne sais plus quoi pensé et j'espère que vos commentaires pourront m'aider à trancher.

Pour la zone cliquable, on verra plus tard car cela me semble bien secondaire à présent
Mais merci pour les différentes sources...

Bonjour,

Ah... C'est plus clair comme cela

Comme tu l'as très justement constaté:
- la liste n'apporte rien
- le titrage <hn> est justifié puisqu'il désigne chacun des 3 blocs d'information hiérarchiques placés dans ton bloc d'info "Les trois dernières news" (mais pris isolément, le code de ton premier message ne permettait pas de deviner que tu avais avais cette structure de page, d'où ma remarque "de précaution" )

Ce contenu ne pose finalement pas de problèmes majeurs.

Quelques points à garder en mémoire:
- un titre <hn> doit précéder le contenu qu'il annonce : tes <hn> doivent précéder les images.
- le lien vers chaque news a comme seule contrainte d'être explicite hors contexte. Le titre-lien résoud efficacement ce point, mais présente le défaut (mineur), justement, de précéder le résumé de la news. Les liens du type "lire la news" peuvent au pire être résolus à l'aide d'un title.
Modifié par Laurent Denis (20 Aug 2006 - 08:51)