Menu
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.
860
The <a> HTML element links a page to a document, another page, or any other specified location. href is the most frequently used attribute. The a href part of the HTML code for link specifies where the hyperlink leads to. The generated hyperlink can be used on images, text, or content inside HTML tags.
<a> is the html element used to display an hypertext reference link (clickable anchor) in <body> part (content) of the page, while <link> is used in <head> part (document meta informations) to link an external ressource file to the document... Wow, awesome community.
The HREF is an attribute of the anchor tag, which is also used to identify sections within a document. The HREF contains two components: the URL, which is the actual link, and the clickable text that appears on the page, called the "anchor text."
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
