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

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

A new feature being introduced in HTML 5 is the addition of custom data attributes. Simply, the specification for custom data attributes states that any attribute that starts with “data-” will be treated as a storage area for private data (private in the sense that the end user can’t see it – it doesn’t affect layout or presentation). This allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page. A quick example:

<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>

data-* attributes are for adding arbitrary data to an element for use solely by the code (usually client side JavaScript) running on the site hosting the HTML.

In order to tell what the three examples you give are for, we would have to reverse engineer the code that comes with them (unless they are documented on the sites) since they don't have standard meanings.

Those are called HTML5 Custom Data attributes.

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. These attributes are not intended for use by software that is independent of the site that uses the attributes. Every HTML element may have any number of custom data attributes specified, with any value.

The reason why you can't find it in Google is because those attribute are custom attributes generated by user for their own usage.

From seeing your code it seems:

• The person who has written this code, wants to store some additional information with the elements. Not sure he may handle this in Javascript too.

• What you should do is to check the Javascript code completely, whether he is handling those data attributes or if possible check with him.

• Since you code is using jQuery library, check for .data() method. After a complete code review, if you find it has no use, then feel free to remove.