Tags HTML de présentations versus span avec classe.

Salut

J'ai une structure HTML commune à plusieurs sites, selon certains sites, il y a quelques informations, très mineures, qui changent. Puisque je ne veux pas changer le HTML ( car ça affecterait tous les sites centralisés ) je me demandais ce qui était préférable niveau sémantique entre les deux structures suivantes.

<a href="#" class="next"><span>Next</span> <em>Page</em> <i>»</i></a>

ou

<span class="etat">Next</span> <span class="page">Page</span> <span class="fleche">»</span>

En CSS, j'affiche au nom les parties qui m'intéresse. Donc si je veux "Next »" j'aurai comme CSS

a.next .page,
a.next em{ display:none; }

Donc, niveau CSS il y a rien non plus de différent. J'aimerais savoir quelle structure HTML est préférable puisque, évidemment, le sélecteur CSS3 nth-child() n'est pas supporté partout et qu'il n'y a pas beaucoup de balise HTML qui peuvent entrer dans un <a>.

J'aurais tendance à utiliser la première méthode afin de sortir le "CSS" du HTML mais d'un autre côté, est-ce une bonne utilisation des tags HTML, c'est ça la question.

Merci
Modifié par Sorano (25 Feb 2010 - 15:28)

Salut,

Cet avis n'engage peut être que moi, mais ni l'une ni l'autre des deux. Enfin plutôt la deuxième mais pas comme ça.

Déja pas d'utilisation des balises <em> et <i> à des fins de présentation, en les stylisant comme tu le voudrais. Ces balises sont destinées à un sens précis, ce qui n'est pas le cas dans ce que tu cherche à faire, ou tu veux juste marquer visuellement des informations de manière différente.

De plus, la double flèche n'ayant aucun sens, elle devrait être remplacée par une image en background, disposée à droite de ton lien accompagné d'un padding-right. Si cette solution ne te convient pas, tu as le recours à l'image dans le code html en laissant l'attribut alt vide. Mais cette solution implique du javascript s'il doit y a voir un changement d'état au survol.

Donc il ne te reste plus que 2 styles à définir dans ton lien, le premier peut être fait par le biais de la balise <a>, le deuxième par un span ajouté autour de l'un ou l'autre des éléments du lien (soit "Next", soit "Page", au choix !)

html :
<a>Next <span>Page</span></a>

css:
a {background: url(fleche.png); ...}
a span {...}

a:hover {...}
a:hover span {...}

Modifié par Mikachu (25 Feb 2010 - 18:26)

Effectivement, ta solution règlerait le problème mais ça engendre un autre, soit de devoir faire des petites flèches en image pour chaque site. ( Ils ne sont pas tous de la même couleur ). Bon, sur 2 sites, ça irait mais sur 60-80, c'est ennuyant un peu.

Autrement, il y a-t-il possibilité de faire une sélection sur le contenu ? Par exemple un truc dans le même genre des sélecteurs d'attributs.

a.next span[content="page"] { display:none }

Bonjour,

<a href="...">Next »</a>

Bonsoir.
Modifié par Florent V. (26 Feb 2010 - 22:41)

Mais si vraiment on a besoin de cibler les différentes parties:
- les SPAN c'est bien;
- si tu as un contenu que tu souhaites masquer, ici ton mot «page», à quoi bon avoir ce contenu au départ, autant le zapper non?
- la notation [blabla="truc"] en CSS est un sélecteur d'attribut, et le contenu n'est pas un attribut;
- on ne peut pas sélectionner un élément en CSS en fonction de son attribut.