On trouve de plus en plus souvent maintenant, sur les sites que nous produisons chaque jour, le fameux fil d’Ariane. C’est une bonne chose, c’est un outil pratique à la navigation.
Comment le coder ?
Plusieurs solutions s’offrent à nous. J’en ai retenu quatre.
Liste non-ordonnée
<ul>
<li><a href="#lien_vers_sommaire">Sommaire</a></li>
<li><a href="#lien_vers_rubrique">Rubrique</a></li>
<li>Page</li>
</ul>
Liste ordonnée
<ol>
<li><a href="#lien_vers_sommaire">Sommaire</a></li>
<li><a href="#lien_vers_rubrique">Rubrique</a></li>
<li>Page</li>
</ol>
Imbrication de listes non-ordonnées
<ul>
<li>
<a href="#lien_vers_sommaire">Sommaire</a>
<ul>
<li>
<a href="#lien_vers_rubrique">Rubrique</a>
<ul>
<li>Page</li>
</ul>
</li>
</ul>
</li>
</ul>
Paragraphe
<p>
<a href="#lien_vers_sommaire">Sommaire</a> –
<a href="#lien_vers_rubrique">Rubrique</a> –
Page
</p>
Quelle version choisir ?
J’ai pendant longtemps utilisé la première version sans trop y réfléchir. C’est STPo qui m’a alerté sur ce point, prétextant qu’il n’y avait pas cette notion supplémentaire à celle introduite par la liste : la descendance.
En effet, « Rubrique » est bel et bien un enfant de « Sommaire », et cela n’est pas rendu par la liste non-ordonnée.
Il m’a d’ailleurs soufflé la dernière solution… mais là encore, aucune notion de descendance en vue. Peut-être faudrait-il remplacer le signe séparateur (–) par un signe porteur de sens (|, ¦, →, :, @, ⊃…) ? Mais est-ce vraiment intuitif ?
Le point ci-dessus pourra d’ailleurs faire l’objet d’un prochain article si besoin.
Voir le billet qui traite de ce sujet : Fil d’Ariane et sémantique (à nouveau)
La troisième solution semble correcte d’un point de vue sémantique du code, mais elle est relativement lourde à mettre en place cependant.
La seconde solution semble l’alternative, mais je suis encore en pleine réflexion et j’hésite toujours. Il existe peut-être d’autres voies ?
Vos avis ?
Je sais que le blog est tout neuf, que personne ne passe encore par ici… Mais néanmoins, j’aimerais ouvrir la discussion et trouver quelques échos à mes questions. Alors n’hésitez pas à contribuer si vous passez par ici et que le sujet vous intéresse.
8 commentaires ↓
Je trouve la solution trois la plus logique, sémantiquement elle prend en compte l’arborescence site, ce qui est le but initial du breadcrumb.
Maintenant j’utilise souvent la solution quatre qui apporte une certaine simplicité de mise en forme.
La 3 est effectivement sémantiquement logique, mais je me demande si ça ne pervertit pas un peu l’usage des listes (pas très fan des listes à un seul item, je trouve ça pas très justifiable en général).
Comme BenchBoy ci-dessus, j’utilise plutôt un paragraphe, plus à défaut de mieux et par paresse qu’autre chose.
Perso j’utilise des listes imbriquées. C’est un pur bonheur sur un navigateur texte. Et je m’oppose à l’utilisation de caractère séparateur, ceux-ci n’ont plus aucune utilité vu que l’indentation et le retours des lignes des listes séparent et structurent déjà le contenu.
Au final, la solution 3 serait un fragment tiré du plan du site donc… ça me plaît.
Moi j’aime bien la 4. Parce que c’est un des rares endroits où je ne veux vraiment pas me prendre la tête, et l’usage de « > » (chevrons) est maintenant devenue une convention de facto pour ce genre d’exercice.
Call me lazy
[…] ce billet fait suite à son prédécesseur (Fil d’Ariane et sémantique) et essaye de creuser un peu plus la […]
[…] fer, vous pouvez aller consulter ces deux articles de vrais pointilleux (que j’adore ça !) : Fil d’Ariane et sémantique et Fil d’Ariane et sémantique (à […]
Tiens, j’avais loupé ce billet ! Les listes ne me semblent pas appropriées pour un fil d’Ariane et j’ai toujours fait d’un simple paragraphe. Léger, efficace.
Laisser un commentaire