HTML5 and JavaScript: Custom Data Attributes

In HTML5, besides having a wide variety of new attributes and elements to select from, you can also use your custom data attributes. They can be useful in many situations but can only be used where there is no existing designed attribute to suit the main purpose of using the custom attribute.

Here is a simple way of creating an interactive component of a web site using the custom data attributes of HTML5, and JavaScript code retrieving attributes.

An interesting part of HTML5 is endorsement or its formal support of the custom attributes in HTML elements. It has been always possible to insert random attributes in elements and use java Script method get Attribute to parse them, but with getting an earful of W3C validator each time. The following is an invalid HTML:

<div id=”mydiv” brand=”toyota” model=”prius”>
John is very happy with his Toyota Prius, because he saves on gas.

This is because any type of custom attributes is not among the HTML specs. HTML5 has given in by giving a new data attribute that enable you to define custom attributes within HTML elements in a structured way due to growing pressure coming from the webmaster community.


Parsing and defining data attribute

Custom attributes are defined using data attribute in HTML5. The format is “data-*”, “*” is usually replaced with a custom attribute name that is desired and then it is set to string value that is desired too. An example is:

<div id=”mydiv” data-brand=”toyota” data-model=”prius”>
John is very happy with his Toyota Prius, because he saves on gas.

Attribute name is prefixed with “data-” in HTML5 to validate. HTML5 in other word as it supports custom attributes, arbitrary attribute names are not allowed.

What makes custom attributes appealing is that they allow you to associate tidbits of the information using an element easily, and parsed later with JavaScript. According to web design agency, the two main ways of using JavaScript to retrieve value of data attributes are:

The first is by using the getAttribute() and the second is bt accessing “dataset” property of element.

An example of each case:

var mydiv=document.getElementById(‘mydiv’)

1. Using the property of DOM’s getAttribute() 
var brand=mydiv.getAttribute(“data-brand”) //returns “toyota”
mydiv.setAttribute(“data-brand”, “mazda”) //changes “data-brand” to “mazda”
mydiv.removeAttribute(“data-brand”) //removes “data-brand” attribute entirely

2. Using the property of JavaScript’s dataset property
var brand=mydiv.dataset.brand //returns “toyota”
mydiv.dataset.brand=’mazda’ //changes “data-brand” to “mazda”
mydiv.dataset.brand=null //removes “data-brand” attribute

Before using the property of “dataset” it should be known that it is not supported by most browsers, so the getAttribute() is a better option. However “dataset” should always exist on all elements returning a value/name map on each data attribute defined on element. To access a certain data attribute, you should reference it using the name without “data-” prefix.

The doctype of HTML 5

If you want your page to validate, it should carry a doctype which informs W3C that the data attribute is HTML5 brainchild, after all this is the whole point.

W3C advocates are simple doctype according to web design companies: <!DOCTYPE HTML> for HTML5. However do not be deceived by its simplicity as it does not only validate documents but also makes all browsers render the web page standards in compliant mode, same to what other doctypes do.

Got Something To Say: