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.

Answer 1

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>