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

Question

What is the difference between the href attribute and data-href in the 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 change 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 is not redirected to the verify_phone_process_1.html page.

Answer 1

HTML - * global attributes are used to store user data (ready to be invoked using CSS and Javascript). * - wildcard, which can be replaced with any subtitles.

In the following snippet, CSS uses the data stored in the data-append to add text :after contents of the div, while Javascript uses the data stored in the data-color attribute to apply color against its background:

 var zzz = document.getElementsByTagName("div")[0].getAttribute("data-color"); var yyy = document.getElementsByTagName("div")[1].getAttribute("data-color"); document.getElementsByTagName("div")[0].style.background = zzz; document.getElementsByTagName("div")[1].style.background = yyy; 

 div::after { content: attr(data-append); } 

 <div data-append="_SUCCESS_" data-color="lawngreen"></div> <div data-append="_FAILURE_" data-color="tomato"></div> 

Answer 2

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

That the former actually refers somewhere with all the functionality / interface that includes (since it is listed as an attribute that executes it), while the latter does nothing by itself, its just an arbitrary named user attribute data with arbitrary value.

---

Edit: Additional information about user 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