<a data-color=”blue”><br /> This tag contains a user-defined color attribute<br /> </a></p> <p><div data-link=”https://github.com/k-vernooy”><br /> This tag contains a data attribute with a link<br /> </div>

<!–data-* attributes allow us to store extra information on standard<br /> , semantic HTML elements.<br /> –><br /> <article<br /> id=”electric-cars”<br /> data-columns=”3″<br /> data-index-number=”12314″<br /> data-parent=”cars”><br /> …<br /> </article><br /> <!– Accessing via JS –><br /> <script><br /> const article = document.querySelector(‘#electric-cars’);<br /> article.dataset.columns // “3”<br /> </script><br /> <!–css–><br /> <style><br /> article::before {<br /> content: attr(data-parent);<br /> }<br /> article[data-columns=”3″] {<br /> width: 400px;<br /> }</p> <p></style>

<!– data-* attritubes can be used on any html element –><br /> <div data-my-custom-data=”true”></div>

Allows the storing of extra information on standard html elements. e.g<br /> div, img, li and p etc.<br /> A data attribute is any attribute that starts with data-(data-term)</p> <p>****How to access the attribute????****</p> <p>Javascript provides a simple syntax for retrieving the data:<br /> element.dataset.term (term is whatever after the hyphen e.g data-term)