How to implement microdata attributes -- data-* and getting rid of the ID attribute?

Question

I am using jQuery 1.4.3.

I am trying to determine a best practice for using data-* attributes. In the recent past, I have created checkboxes like this:

<input type='checkbox' id='123' class='Product' comp='1' man='1'>
<input type='checkbox' id='456' class='Product' comp='1' man='2'>
<input type='checkbox' id='789' class='Product' comp='2' man='3'>

The HTML 5 spec says that I shouldn't use custom attributes and that I should use data-* attributes. Which means that the above checkboxes should really be like this:

<input type='checkbox' id='123' class='Product' data-comp='1' data-man='1'>
<input type='checkbox' id='456' class='Product' data-comp='1' data-man='2'>
<input type='checkbox' id='789' class='Product' data-comp='2' data-man='3'>

That's easy enough to accomplish, but with jQuery, I would usually call these elements by their id, which in this case happens to be the actual product id. So, my code to access these would be like this:

$(".Product").click(function() {
    var ProductID = $(this).attr("id");
    alert(ProductID );
});

Since the ID is really just a piece of data that I need to access, it should be a data-* attribute instead of an id. I think what I really should be doing is this:

<input type='checkbox' class='Product' data-prodid='123' data-comp='1' data-man='1'>
<input type='checkbox' class='Product' data-prodid='456' data-comp='1' data-man='2'>
<input type='checkbox' class='Product' data-prodid='789' data-comp='2' data-man='3'>

This means that the id is no longer necessary for storing data, because I can do this:

$(".Product").click(function() {
    var ProductID = $(this).attr("data-prodid");
    alert(ProductID );
});

And if I want to check or uncheck a specific GROUP of boxes, I can do something like this:

// WHEN A PRODUCT IS CLICKED 
$(".Product").click(function() {
    // GET THE COMP
    var Comp = $(this).attr("data-comp");
    // UNCHECK BOXES WITH A DISSIMILAR COMP THAN THE ONE CLICKED
    $("[data-comp]!="+Comp).attr("checked", false);
});

It really seems like I can accomplish everything I need without using the id for storing data. Am I wrong? Is this how I should implement microdata storage? Is it correct that I will no longer need the id attribute except for CSS layout? Am I missing anything?

I'm a little bit confused but according to w3c spec any custom attribute should be prefixed with word 'data-' and in an input element like text box id, name and class attribute should be used normally without data, I think these are not counted as custom attributes. Other than these like 'comp' is a custom attribute and it should be used with a prefix 'data-'. A div or span can also have an id and class attributes. Correct me if I'm wrong! — The Alpha, Feb 08 '12 at 16:50

score 1 · Answer 1 · answered Feb 08 '12 at 16:50

This sounds reasonable. The id must be unique across the whole DOM. If those values are actually product identifiers, then use data-prodid. You could have several DOM elements that represent the same product; duplicating the data-prodid attribute is perfectly legal.

score 1 · Accepted Answer · answered Feb 08 '12 at 16:57

Using ID has its own meaning in HTML,CSS and Javascript.

ID in HTML defines an unique element meaning it must be unique in a document.
ID in CSS applies styling rules to a specific block or element.
ID in JS will allow you to retrieve the element using document.getElementById.

You don't have any of those meaning when you use data attribute.

How to implement microdata attributes -- data-* and getting rid of the ID attribute?

2 Answers2

Linked