Using Custom Attributes in HTML5

Apr 16, 2012
HTML HTML5
227 Shares
By

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.

Author: Sue Smith
Sue Smith works as a Web/ software developer and technical writer based in the UK: see benormal.info for details. Sue has written for various clients including Smashing Magazine and Mobiletuts+. She also does a little Android development and some comedy writing.
  • http://www.websitedevelopersindia.com/ Website Developers India

    can we develop OS Commerce website using HTML5??

  • Brett Jankord

    What type of browser support does .getAttribute, .setAttribute, and .removeAttribute have?

  • http://www.paulund.co.uk/ Paul

    These attributes are so useful for front end variables in both Javascript and CSS can not be overlooked.

  • http://www.rapidsofttechnologies.com/web-application-development.html Web Application Development

    Seems pretty cool feature but you didn’t mention here which browser will support yet. And would these attributes work in the IE9? But to be honest, I don’t like it all.

  • http://www.itoctopus.com/ itoctopus

    Very interesting!

    I didn’t know about custom attributes before.

    Quick comment though, I think the way datasets are accessed is confusing (need to remove the data, and then convert the variable to a different naming scheme).

  • http://twitter.com/ZenShadowWeb ZenShadow

    I never even considered using custom variables before. This will make things with JS cleaner, maybe not easier though.

  • Mohit Saxena

    html5 development allows effortless usage of complex
    animations and graphics with the help of a canvas tag along with video
    and audio support to give a rich taste to the websites

  • thomas

    Very
    interesting info!Perfect just what I was searching for!

  • http://lancejoyner.yolasite.com/ AldenHuff

    This is all individuals listen to when using reasoning so preserve your breathing. Instead use it to make fun of and offend the dummies so at least you can get some enjoyment out of speaking with a stone walls.