5568 sujets

Sémantique web et HTML

Bonsoir à tous,

Désolé pour cet horrible titre, mais j'ai un petit soucis. J'essaie de respecter au maximum les standards web et c'est pourquoi je viens ici.

En fait, sur mon site, j'ai une liste déroulante avec des articles. Dans chaque <option></option>, il y a une balise "name" contenant, par exemple, "19.60" ; à savoir des taxes. Ces taxes sont utilisées en javascript lors de la sélection d'une option.

Autre exemple, j'ai une image du style :

<img ... name="/adresse/adresse.jpg" ... />


Ou "name" contient l'url de l'image agrandie, pour permettre le zoom en javascript.

Je sais bien que la balise name n'est pas prévue pour. D'ailleurs même le W3C me renvoit une erreur car elle contient des caractères non autorisés. Afin de faire un mixte entre respect des standards et utilisé, quelle balise me conseillez-vous d'utiliser (je suis en xhtml strict) ? J'ai essayé title, ça passait au W3C mais ça s'affiche lors du survol. Smiley biggol

Merci d'avance,
Gaylord.P. Smiley smile
Modifié par Gaylord.P (30 Mar 2012 - 11:28)
Bonsoir,

Gaylord.P a écrit :
il y a une balise "name"

En l'occurrence c'est un attribut, pas une balise.
Et a priori sur un élément OPTION il faut utiliser l'attribut value, pas name. Mais tout dépend de l'usage exact.

Gaylord.P a écrit :
Où "name" contient l'url de l'image agrandie, pour permettre le zoom en javascript.

Pourquoi ne pas partir sur une structure du type <a href="grande image"><img src="petite image" alt="..."></a> ?

Gaylord.P a écrit :
Je sais bien que la balise name

L'attribut name.

Gaylord.P a écrit :
... n'est pas prévue pour.

En HTML5 il y a un mécanisme pour stoquer des valeurs texte dans des attributs HTML arbitraires: les attributs data. Ça peut donner:
<option value="xyz" data-vat="19.60">Bla bla</option>

<img src="petite image" data-big="grande image" />

Je te conseille d'utiliser les attributs data (accessibles en JS via element.getAttribute('data-foo') ou, dans les navigateurs récents, via element.dataset.foo) avec un Doctype HTML5. Si tu tiens à rester en XHTML1 pour une raison ou une autre, utilise quand même des attributs data plutôt que de détourner des attributs existants de leur rôle (quitte à avoir des erreurs de validation, la validation étant un outil et pas une fin en soi...).
Merci pour ta réponse Smiley smile

Effectivement, c'est un attribut et tu as bien fait de me reprendre ^^

Je ne connaissais pas l'attribut data et effectivement ça pourrait bien convenir. Ce serait même parfait. Cependant quel est le comportement sur les "vieux" navigateur ? Même si ce terme est très aléatoire, je parle de manière générale. Car si c'est pour avoir un site pas ou peu fonctionnel sur certains navigateurs - et ce n'est pas négligeable -, vaut mieux utiliser un attribut, même si ce n'est pas son rôle. Après tout, je doute qu'une majorité des visiteurs aillent regarder la source pour trouver ce genre de choses ; et quand bien même, quel intérêt.

Ceci dit je veux me rapprocher au maximum des standards, tout en gardant le maximum de fonctionnalité pour le maximum de gens, évidemment.
Gaylord.P a écrit :
Cependant quel est le comportement sur les &quot;vieux&quot; navigateur ?
Comme l'a dit Florent, tout ce qui change c'est la fonction JS à utiliser.

Il n'y a donc rien de bloquant pour les "vieux" navigateurs.
Modérateur
Bonjour !

Voici un article alsa sur data : Attributs data-*

Gaylord.P a écrit :
Cependant quel est le comportement sur les &quot;vieux&quot; navigateur ?
et
Laurie-Anne a écrit :
Comme l'a dit Florent, tout ce qui change c'est la fonction JS à utiliser.
Il n'y a donc rien de bloquant pour les "vieux" navigateurs.


Je pense que, comme moi, Gaylord.P (arrête moi si je me trompe hein !) a trébuché sur le fait que ce soit une nouveauté HTML5. Ici comme sur l'article que j'ai collé plus haut on parle de la compatibilité de la fonction JS à utiliser et non de l'attribut en lui-même. La question pourrait (a mon sens) être reformuler comme ceci :

Est-ce qu'un navigateur qui ne gère pas le HTML5 pourra bien interpréter cet attribut "data-*" ?

Ce a quoi répond bien ce site : http://www.caniuse.com/#search=data-
Enfin je pense.

Du coup je déforme et relance un peu la question autrement pour m'instruire :

Comment se fait-il que certaines fonctions HTML5 soient bien interprétées par IE6 (par exemple !) ?

Certainement soumis à une idée reçue, il me semblait que c'était le navigateur (en donc sa version et ses fonctionnalités) qui permettait ou non de gérer ce genre de chose et que du coup un navigateur qui n'a pas été créé pour du HTML5 ne peut pas (et ne pourra jamais) en gérer même un petit bout (et idem pour le CSS3)... apparemment je me fourvoie ! (pas taper ! pas taper !)


Merci bien pour vos futures réponses éclairées,
Très bonne journée à vous
Smiley smile
Modifié par _laurent (28 Mar 2012 - 09:59)
_laurent a écrit :
Comment se fait-il que certaines fonctions HTML5 soient bien interprétées par IE6 (par exemple !) ?

Dans le cas des attributs data: si tu inventes un nom d'attribut, mettons "tartiflette", dans tous les navigateurs tu peux récupérer la valeur de cet attribut avec element.getAttribute('tartiflette'). L'attribut lui-même n'est pas valide, mais les navigateurs ne restreignent pas la création d'attributs en HTML ou dans le DOM aux attributs définis dans la spécification. Donc les attributs data-* de HTML5 ne sont pas une nouvelle fonctionnalité, mais plutôt une standardisation d'un fonctionnement connu des navigateurs.

Donc la première nouveauté ici c'est la standardisation, pas la fonctionnalité de base. Et cette standardisation prend soin de ne pas créer un bordel sans nom en imposant un espace de nom "data-*". Le deal c'est que la spécification HTML5 et les spécifications futures ne s'amuseront pas à définir de nouveaux attributs commençant par "data-", car cet espace de nom est réservé aux Authors (les développeurs web notamment). Les User Agents (navigateurs web) ne doivent pas non plus implémenter des fonctionnalités propriétaires qui utilisent des attributs dont le nom commence par "data-".

La deuxième nouveauté, c'est la création d'une interface DOM element.dataset, qui permet de lister les attributs "data-*" d'un élément (sans lister tous les attributs ou toutes les propriétés DOM), et d'accéder à un attribut "data-bidule" via element.dataset.bidule. Ça par contre ce n'est pas une standardisation d'implémentations et pratiques de développement existantes, mais une nouvelle fonctionnalité, et c'est donc implémenté uniquement dans les navigateurs récents. C'est la différence entre "Partially supported" et "Supported" dans le tableau de compatibilité de caniuse.com.