Sometimes we store meta data in HTML tags in form of classes or custom attributes. But that’s a bad way of storing meta data. Because you as the developer of the website known’s that its meta data but other developer will not be able to identify meta data by look at the attribute or classes. So HTML5 provides a way to store meta data in HTML tags known as data attributes.
Ways of storing meta data
<a href="http://qnimate.com" class="blog-name-qnimate">QNimate</a>
<!-- Here we are storing meta data in custom attributes -->
<a href="http://qnimate.com" blog-name="qnimate">QNimate</a>
<!-- Here we are storing meta data in HTML data attributes -->
<a href="http://qnimate.com" data-blog-name="qnimate">QNimate</a>
We can see that data-* attributes are formed in same way as any other custom attribute. data-* attributes can be used the same way as any other attribute.
Using data-* attributes in HTML4 and lower
In HTML4 attributes come in key/value pairs. You must assign a value to a attribute otherwise it becomes invalid. But in HTML5 if we don’t provide value to an attribute then the value becomes a empty string.
As data-* attributes are formed the same way as any other custom attribute you can use data-* attributes in HTML4. But make sure you assign a value to it.
<html>
<head>
<title>QNimate</title>
</head>
<body>
<!-- This is invalid in HTML4 -->
<p data-blog-name-qnimate>QNimate</p>
<!-- This is valid in HTML4 -->
<p data-blog-name="qnimate">QNimate</a>
</body>
</html>
data-* attribute is just a readable way of storing meta data.
Using data-* for styling
We can use data-* for styling like we use any other attribute for styling
{
font-size: 20px;
}
/* or */
a[data-blog-name="qnimate"]
{
font-size: 20px;
}
Javascript targeting
HTML5 provides querySelector() and querySelectorAll() for getting reference of HTML tags using any attributes.
var object = document.querySelector("a[data-blog-name-qnimate]");
//or
var object = document.querySelector("a[data-blog-name='qnimate']");
Accessing attribute using Javascript
We can retrieve data-* attribute values using JavaScript like we do for any other attribute.
Dataset
HTML5 provides a special property to HTML elements called as dataset. Its assigned to a DOMStringMap object which has properties same as the data-* attributes of the HTML element.
For non HTML5 supported browser also you can use Dataset property using a Polyfill called as Dataset Shim.
More operations on dataset property:
document.getElementById("element").dataset.firstname = "narayan";
//retrieving the value
var firstname = document.getElementById("element").dataset.firstname;
//if attribute has a '-' in between, for example: data-first-name then
var firstname = document.getElementById("element").dataset.firstName;
//deleting a value
delete document.getElementById("element").dataset.firstname;
Conclusion
We can say that HTML5 introduced a readable way of storing meta data in html tags called as data-* attributes. Its used the same way as any other attribute. Only benefit is if we are using it in HTML5 then we get dataset feature.
@narayanprusty
