CODEWITHSUNDEEP
jqueryhtmlcss
Donny V.
Donny V.

Reputation: 23596

Is it alright to add custom Html attributes?

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>

Upvotes: 22

Views: 23512

Answers (11)

Avenida Gez
Avenida Gez

Reputation: 1

Years ago I used custom attributes, and they work. Doing the same following the html 5 standard, will avoid future problems, because past problem do not exist. future problems may come with movil devices and other devices different than a computer, but, as they will be part of the near future, stick with html 5 custom attributes if you want to use them. My new case is simple, what I do, is to use tags well coded, with simple data in between (variable data) which I get via nodeValue having your element ... this.firstChild.nodeValue and the key is to make the used tag display none by style how you get this? getelementbyID, by tagname, by name, by classname you choose. Advantages No need to encode decode entities, etc., no need jquery

Upvotes: 0

EndangeredMassa
EndangeredMassa

Reputation: 17528

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.

Upvotes: 9

SpoonMeiser
SpoonMeiser

Reputation: 20467

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?

Upvotes: 0

tanathos
tanathos

Reputation: 5606

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

Upvotes: 27

Steve Perks
Steve Perks

Reputation: 5530

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.

Upvotes: 0

jishi
jishi

Reputation: 24634

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... :)

Upvotes: 0

kgiannakakis
kgiannakakis

Reputation: 104196

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.

Upvotes: 0

AnthonyWJones
AnthonyWJones

Reputation: 189555

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.

Upvotes: 2

AAA
AAA

Reputation: 4986

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">

Upvotes: 21

Genericrich
Genericrich

Reputation: 4651

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.

Upvotes: 2

aivarsak
aivarsak

Reputation: 279

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

Upvotes: 0

Related Questions