html - What are "data-url" and "data-key" attributes of <a> tag?

Question

I've faced two strange attributes of an html tag . They are "data-url" and "data-key".

What are they and how can they be used?

For some reasons i can't show the exact example of the HTML file I've found them in, but here are some examples from the web with such tags:

1. data-key
2. data-key
3. data-url

PS: I've tried to Google, but no useful results were found.

Answer 1

When Should I Use the Data Attribute?

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

---

This time the data attribute is used to indicate the bubble value of the notification bubble.

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

This time is used to show the text for the tooltip.

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

---

When Shouldn’t I Use the Data Attribute?

We shouldn’t use data attributes for anything which already has an already established or more appropriate attribute. For example it would be inappropriate to use:

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

when we could use the already defined datetime attribute within a time element like below:

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

---

Using Data Attributes With CSS (Attribute selectors)

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

---

Using Data Attributes With 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);
 });

Examples and info from here