Attributs Non Standards sur les Balises HTML. Bonne Chose? Mauvaise Chose? Vos Réflexions?

Question

HTML (ou peut-être juste XHTML?) est relativement strict en ce qui concerne les attributs non standard sur les balises. S'ils ne font pas partie de la spécification, alors votre code est considéré non conforme.

Les attributs non standards peuvent être assez utiles pour transmettre des métadonnées à Javascript cependant. Par exemple, si un lien doit afficher une popup, vous pouvez définir le nom de la popup dans un attribut:

cliquez moi

Alternativement, vous pouvez stocker le titre de la popup dans un élément caché, comme un span:

    .popup .title { display: none; }

    cliquez moi
    Titre de ma Popup

Cependant, je suis partagé quant à savoir quelle méthode devrait être préférée. La première méthode est plus concise et, je suppose, ne perturbe pas autant les moteurs de recherche et les lecteurs d'écrans. En revanche, la deuxième option rend le stockage de grandes quantités de données plus facile et est donc plus polyvalente. Elle est également conforme aux standards.

Je suis curieux de connaître l'avis de cette communauté. Comment gérez-vous une situation comme celle-ci? La simplicité de la première méthode l'emporte-t-elle sur les inconvénients potentiels (s'il y en a)?

Answer 1

Je suis un grand fan de la solution HTML 5 proposée (data- attributs préfixés). Edit: J'ajouterais qu'il existe probablement de meilleurs exemples pour l'utilisation d'attributs personnalisés. Par exemple, des données qu'une application personnalisée utilisera et qui n'ont aucun analogue dans les attributs standard (par exemple, la personnalisation des gestionnaires d'événements basée sur quelque chose qui ne peut pas nécessairement être exprimé dans une className ou un id).

Answer 2

Les attributs personnalisés offrent un moyen pratique de transporter des données supplémentaires côté client. Dojo Toolkit le fait régulièrement et il a été souligné (Réfutation des mythes sur Dojo Toolkit) que :

Les attributs personnalisés ont toujours été valides en HTML, ils ne sont tout simplement pas valides lorsqu'ils sont testés contre une DTD. [...] La spécification HTML stipule que tout attribut non reconnu doit être ignoré par le moteur de rendu HTML dans les agents utilisateur, et Dojo tire éventuellement parti de cela pour améliorer la facilité de développement.

Answer 3

Une autre option serait de définir quelque chose comme ceci en Javascript:

var link_titles = {link1: "Titre 1", link2: "Titre 2"};

Ensuite, vous pouvez utiliser ceci plus tard dans votre code Javascript, en supposant que votre lien a un ID correspondant à l'ID dans cette table de hachage.

Cela n'a pas les inconvénients des deux autres méthodes: pas d'attributs non standard ni d'élément span caché moche.

L'inconvénient est que cela pourrait être un peu excessif pour des choses aussi simples que votre exemple. Mais pour des scénarios plus complexes, où vous devez passer plus de données, c'est un bon choix. Surtout compte tenu du fait que les données sont transmises sous forme de JSON, vous pouvez donc passer des objets complexes facilement.

De plus, vous séparez les données du formatage, ce qui est une bonne chose pour la maintenabilité.

Vous pouvez même avoir quelque chose comme ceci (ce que vous ne pouvez pas vraiment faire avec les autres méthodes):

var poi_types = {1: "Ville", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Pékin", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

Hatsune

Et comme vous utilisez probablement un langage de programmation côté serveur, il devrait être trivial de générer dynamiquement cette table de hachage (il suffit de la sérialiser en JSON et de la placer dans la section d'en-tête de la page).

Answer 4

Eh bien dans ce cas, la solution optimale est

cliquez

et en utilisant l'attribut title.

Parfois je ne respecte pas la spécification si j'en ai vraiment besoin. Mais rarement, et seulement pour une bonne raison.

EDIT : Pas sûr pourquoi le -1, mais je voulais souligner qu'il arrive parfois que vous pensiez avoir besoin de ne pas respecter la spécification, alors que ce n'est pas le cas.

Answer 5

Pourquoi ne pas déclarer l'attribut popup_title dans un DTD personnalisé ? Cela résout le problème de validation. Je le fais avec chaque élément, attribut et valeur non standard et je remercie cette validation de ne me montrer que les véritables problèmes avec mon code. Cela rend également moins probable toute erreur de navigateur avec un tel HTML.