Difference between href and data-href in anchor tag in html

Question

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.

Aguiar

Answer 1

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

Glasswork

Can you please suggest me any link where I can check about these html5 data attributes? – Aguiar

I edited the answer to include some links, please have a look. – Glasswork

Answer 2

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>

Leffen