Using Custom Attributes in HTML5
Custom attributes are among the most significant additions for HTML5, and can play a major role in semantic Web development. In this tutorial we’ll go through a practical example of creating and accessing HTML5 custom data attributes, including the necessary JavaScript functions.
It was possible before HTML5 to add your own attributes to HTML elements and access them using JavaScript, but if you’ve ever tried it you’ll know you can forget about getting your markup to validate. HTML5 provides the ability to create and use your own element attributes within valid pages.
Create Your HTML5 Document
If you don’t already have one you want to use, copy the following outline into an HTML file:
<!DOCTYPE html> <html> <head> <script> /*functions here*/ </script> </head> <body> </body> </html>
We will place our elements with custom attributes in the body and the JavaScript functions for accessing them in the head section script area.
Create an Element
Let’s add an element with some simple content and a custom attribute as well as an ID so that we can identify it in JavaScript for demonstration:
<div id="product1" data-product-category="clothing"> Cotton Shirt </div>
As you can see, the custom attribute has the form: “data-*” with a name or names of your choice after the “data-” section. This is the only valid way to use custom attributes in HTML5, so make sure you start your elements this way if you need your pages to validate.
Of course the details of your own projects will dictate whether custom attributes are useful to you, as well as how to go about naming them. This example could be for a retail site with different product categories. The custom attributes allow you to treat elements in particular ways within the JavaScript code for the page, for example when using animated display functions. It’s really only advisable to use custom attributes if there is no standard HTML attribute available to do what you need.
Add a Test Button
Your own JavaScript functions will execute on events within your pages, but to demonstrate add the following button to your page:
<input type="button" value="get attribute" onclick="getElementAttribute('product1')"/>
The button passes the element ID as parameter, so that the JavaScript function can refer to it and access its custom attribute.
Get the Attribute
The most common way to access attributes in JavaScript is using “getAttributes” which is what we’ll do first. Add the following function in the script section of your page head:
function getElementAttribute(elemID) { var theElement = document.getElementById(elemID); var theAttribute = theElement.getAttribute('data-product-category'); alert(theAttribute); }
We alert the attribute value for demonstration, but your own scripts can do whatever you need with it.
Get the Dataset
As an alternative to the DOM “getAttributes” method, you can use the element dataset. This can be more efficient, particularly in cases where your code is iterating through a variety of attributes. However, browser support for dataset is still very low, so do bear this in mind. This code carries out the same process as the line commented out from the previous approach:
//var theAttribute = theElement.getAttribute('data-product-category'); var theAttribute = theElement.dataset.productCategory;
With dataset you remove the “data-” from the start of the attribute name when referring to it in JavaScript – you do still need to include it in your HTML though. Notice that if your custom attribute name has a hyphen in it, which ours does, this becomes camel-case when accessed through the dataset (“data-product-category” becomes “productCategory”).
Other Methods and Functions
We have explored getting attributes, but your scripts can also set and remove them. The following code demonstrates setting attributes using the standard JavaScript method and the dataset alternative:
//DOM method theElement.setAttribute('data-product-category', 'sale'); //dataset version theElement.dataset.productCategory = "sale";
To remove an attribute, you can also use either a DOM method or the dataset:
//DOM method theElement.removeAttribute('data-product-category'); //dataset version theElement.dataset.productCategory = null;
Conclusion
Implementing custom attributes in HTML5 is not technically complex in itself, however the real difficulty is in choosing whether it is appropriate to use them in your own projects, and if so how to go about it efficiently. Finally, do remember that it’s still a little early to start using the dataset approach for functions your pages rely on, so be sure to provide an alternative for non-supporting browsers.