Is it alright to add custom Html attributes?

Question

I have a site I\'m working on where I want to mark if a row of data has been changed. If something has been changed in that row I would mark it with a custom attribute like

Answer 1

I believe that there is not a "Yes" or "No" answer to your question. Using custom attributes will help you have cleaner and shorter code in many circumstances. Your example is trivial and I believe that it can't demonstrate the power and flexibility of this technique. Specifically you are dealing with a boolean attribute, which most likely has to do with appearance. These kind of things are better handled with a class. However, with custom attributes you could add context to your nodes. You could use this context to do some calculations. For example, add a price or a weight attribute to the nodes of the list. You then later use these fields to calculate the sum or average. I am sure that there are many better than this examples out there.

On the other hand custom attributes will prevent the html from passing validation testing. This is an important problem and it may get even more important in the future.

Answer 2

Using custom attribute is useful from several points of view, but be sure to avoid namespace-collision by using a prefix:

<td custom:isDirty="true">

Otherwise it might clash with future implementations.

As a sidenote, a DOM-element can have custom properties like any other js-object, meaning that if you create nodes dynamically you can still add custom data of any type to your element, without affecting the validation.

var element = document.createElement('div');
element.myCustomObject = { foo: "bar", someFunction: function () { alert('foobar'); }};

document.body.appendChild(element);

Of course, the above doesn't make sense to people that never done clientside scripting without frameworks like jQuery, prototype etc... :)

Answer 3

Why don't you use the jQuery data capability?

Your example will be (I don't know the condition to select proper td):

$("tr td").data("isDirty", true);

take a look at documentation

Answer 4

isDirty is a perfect example of how a class should be named. Class names should be semantic, and I can't think of a better way of assigning a class to describe what it is about that element (other than to use title if you want to share that information with the end user)?

You shouldn't set your own attributes unless you're willing to maintain your own DTD.

Answer 5

HTML 5 supports custom attributes prefixed with "data-". So, I would use that to be forward-compatible.

As for earlier versions, I don't think it will validate, but I wouldn't worry about that. I've heard that some browsers may ignore these tags, though. So, be sure to test it all around.

Answer 6

I strongly recommend to stick to standards. Web is already messed up ;)