16

What is the difference between href and data-href attribute in html <a></a> tag? My current code is written below:

<a id="sign_in_with_facebook" href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>

and when I'm changing it to 

<a id="sign_in_with_facebook" data-href="verify_phone_process_1.html" class="btn btn-default bubbla-btn">Sign In with Facebook</a>

it's not redirecting to verify_phone_process_1.html page.

Swamy
  • 400
  • 1
  • 3
  • 15

2 Answers2

13

What is the difference between href and data-href attribute in html tag?

That the former actually links somewhere, with all the functionality/UI that includes (because it is specified as the attribute that accomplishes that) – whereas the latter does nothing on its own, it’s just an arbitrarily named custom data attribute with an arbitrary value.

Edit: Some more information on custom data attributes:

https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes

http://www.w3.org/TR/html5/dom.html#custom-data-attribute

CBroe
  • 91,630
  • 14
  • 92
  • 150
13

Global HTML data-* attributes are used to store custom data in the HTML code, ready to be called by CSS (content used with the ::before and ::after pseudo-elements) and Javascript. The asterisk ( * ) is a wildcard that can be substituted by any subtitle.

In the next snippet the CSS uses data stored in data-append to append text :after a div's content while Javascript uses the data stored in data-color attribute to apply color on its background:

var div_one = document.getElementsByTagName("div")[0]
var div_two = document.getElementsByTagName("div")[1];

div_one.style.background = div_one.getAttribute("data-color");
div_two.style.background = div_two.getAttribute("data-color");
div::after {
  content: attr(data-append);
}
<div data-append="_SUCCESS_" data-color="lawngreen"></div>
<div data-append="_FAILURE_" data-color="tomato"></div>
L777
  • 7,719
  • 3
  • 38
  • 63