Is it all right 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 so.

<tr>
  <td isDirty="true">
     ....row data
  <td>
</tr>

This works great with jQuery and it doesn't add to much code to my page.

But is this really the correct way of doing something like this and what are the downsides?

I guess another way of doing this would be like this, but it seems like over kill.

<tr>
  <td>
     ....row data
     <input id="isDirty" type="hidden" value="true" />
  <td>
</tr>

Answer 1

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

Answer 2

This will prevent your page from validating I think, since you are adding custom attributes that the validators won't know about.

You might be able to do this with your own DTD or schema, but that's more work.

Your second example is the right way to do this I think. The right direction anyway.

Answer 3

Technically you should be using the class attribute for this. Tags can have more than one class so it shouldn't affect anything

<td class="isDirty otherclass">

Answer 4

HTML 5 supports custom tags 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 5

Sticking to the standards for the sake of sticking to the standards is a bad reason to stick to standards.

Your page specifies the DTD, your server specifies the mimetype. As long as you aren't sending real xhtml there is no reason not use expando attributes in this way. It can be very helpful.

Ok so your page won't 'validate' if you need to care about that then don't do it.

Just don't be seduced by IEs 'conveniant' elem.isDirty method of accessing such values. Always use elem.getAttribute('isDirty') to access the value.

Answer 6

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 7

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 8

See also http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags

Answer 9

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 10

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 11

I think with all the different answers here I'v decided not to use expando attributes or classes.

I'll just save the IsDirty state in an array with the rowid on the client side. Then I can later use it to look up the dirty rows.

Thanks tanathos for the idea.

Answer 12

Adding arbitrary attributes will mean that your HTML is no longer valid.

If you are using XHTML, however, I think you can add attributes that have a different XML namespace, which won't cause validation problems.

I don't know a great deal about this, but thought I'd mention it as no one else has. Perhaps someone else could expand on, or refute, this if they have a better understanding?

Answer 13

Can anyone provide a specific example of how adding custom HTML attributes will cause a page to render improperly? All of the comments above that are saying to stay away from it are speculating that it could cause problems down the road. Browsers have and most likely will always ignore attributes that they cannot understand.