There’s a lot of interesting new features being suggested for HTML5 and XHTML2. Some of them are extremely useful, some of them seem to be more questionable additions. One feature being implemented in HTML5 that I do like is the addition of custom data attributes to HTML elements.
Manage Your Data
A custom data attribute is simply any attribute starting with the string “data-”. They can be used to store data that you want kept private to the page (not viewable by the user) in cases where there is no appropriate attribute available. Every element can have any number of custom data attributes.
For example, consider a form validation script. The script needs to know what form of validation is required for each field. Currently, many of these scripts will use the class attribute to signal that.
Making use of the new HTML5 custom data attributes, we might choose to store the information like this instead:
var theInput = document.getElementById('myInput');
var validationType = theInput.dataset.validation;
What I Think
Custom data attributes have been met with varied opinions…some think it’s fantastic while others either don’t get the value or simply don’t like the idea. Personally…I think it’s a good idea.
Currently there’s two popular ways of providing hooks for scripts in HTMl where no appropriate attribute exists:
Use an existing attribute even though it may not necessarily be semantically correct.
Create a new attribute and have the page no longer valid.
Where you stand personally along those lines, of course, varies. Some people don’t mind a page that doesn’t fully validate and would rather not clog up their id’s and classes. Others don’t mind adding an extra class to an element as long as the page is valid.
With the new data-* attributes, you can have the best of both worlds; your page can validate and you don’t have to add extra classes and id’s to make your scripts work. It’s also very easy to implement, and manages to keep all the data needed for scripting together in one dataset. What’s not to like?