web-dev-qa-db-fra.com

Quels sont les attributs "data-url" et "data-key" de la balise <a>?

J'ai fait face à deux attributs étranges d'une balise html. Ce sont "data-url" et "data-key" .

Quels sont-ils et comment peuvent-ils être utilisés?

Pour certaines raisons, je ne peux pas montrer l'exemple exact du fichier HTML dans lequel je les ai trouvés, mais voici quelques exemples du Web avec de telles balises:

  1. clé de données
  2. clé de données
  3. data-url

PS: J'ai essayé de Google, mais aucun résultat utile n'a été trouvé.

htmldomweb
19
Agafonova Victoria

Quand dois-je utiliser l'attribut de données?

Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées sur la page ou l'application, pour lesquelles il n'y a plus d'attributs ou d'éléments appropriés.

Cette fois, l'attribut data est utilisé pour indiquer la valeur de bulle de la bulle de notification.

<a href="#" class="pink" data-bubble="2">Profile</a>

Cette fois est utilisée pour afficher le texte de l'infobulle.

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

Quand ne devrais-je pas utiliser l'attribut de données?

Nous ne devons pas utiliser d'attributs de données pour tout ce qui a déjà un attribut déjà établi ou plus approprié. Par exemple, il serait inapproprié d'utiliser:

<span data-time="20:00">8pm<span>

quand nous pourrions utiliser l'attribut déjà défini datetime dans un élément de temps comme ci-dessous:

<time datetime="20:00">8pm</time>

tilisation des attributs de données avec CSS ( Sélecteurs d'attributs )

[data-role="page"] {
  /* Styles */
}

tilisation d'attributs de données avec jQuery ( . Attr () )

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

-

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

Exemples et informations de ici

16
daniel__

Ceux-ci sont appelés Attributs de données personnalisées HTML5 .

Les attributs de données personnalisés sont destinés à stocker des données personnalisées privées sur la page ou l'application, pour lesquelles il n'y a plus d'attributs ou d'éléments appropriés. Ces attributs ne sont pas destinés à être utilisés par un logiciel indépendant du site qui utilise les attributs. Chaque élément HTML peut avoir un nombre quelconque d'attributs de données personnalisés spécifié, avec n'importe quelle valeur.

La raison pour laquelle vous ne le trouvez pas dans Google est que ces attributs sont des attributs personnalisés générés par l'utilisateur pour son propre usage .

En voyant votre code, il semble:

  • La personne qui a écrit ce code souhaite stocker des informations supplémentaires avec les éléments. Pas sûr qu'il puisse gérer cela aussi dans Javascript.

  • Ce que vous devez faire est de vérifier complètement le code Javascript, qu'il gère ces attributs de données ou, si possible, vérifiez avec lui.

  • Puisque votre code utilise la bibliothèque jQuery, vérifiez la méthode . Data () . Après un examen complet du code, si vous trouvez qu'il n'a aucune utilité, n'hésitez pas à le supprimer.
9
Praveen

data-* attributs servent à ajouter des données arbitraires à un élément à utiliser uniquement par le code (généralement JavaScript côté client) exécuté sur le site hébergeant le code HTML.

Afin de savoir à quoi servent les trois exemples que vous donnez, nous devons procéder à une rétro-ingénierie du code qui les accompagne (sauf s'ils sont documentés sur les sites) car ils n'ont pas de signification standard.

7
Quentin

Une nouvelle fonctionnalité introduite dans HTML 5 est l'ajout d'attributs de données personnalisés. Simplement, la spécification pour les attributs de données personnalisés stipule que tout attribut commençant par "data-" sera traité comme une zone de stockage pour les données privées (privées dans le sens où l'utilisateur final ne peut pas les voir - cela n'affecte pas la mise en page ou présentation). Cela vous permet d'écrire un balisage HTML valide (en passant un validateur HTML 5) tout en incorporant simultanément des données dans votre page. Un exemple rapide:

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li>

1
Sarah Peeters