htmldomweb

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

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.

Solution

  • 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