Possible Duplicate:
Custom attributes - Yay or nay?

Is it appropriate to create custom attributes for HTML elements as so:

<input type='text' value='name' custom_attribute='value'>

This seems a little hacky and I'm not sure if it is supported largely or exactly how it would be accessed via DOM.

+1  A: 

It's formally supported by HTML5:

+2  A: 

Check out html5 data atrributes.

Mr Resig explains more

A new feature being introduced in HTML 5 is the addition of custom data attributes. This is a, seemingly, bizarre addition to the specification - but actually provides a number of useful benefits.



it will work, but there is a lot of better and different ways you can achieve the same thing.

you can create a hidden input next to it that holds the desired value.


It does not follow strict guidlines, but you can do it. The Dojo Library uses that technique all over the place.

Seattle Leonard

Good question. I've thought of it as a little hacky. It depends on how it's used. In many cases a hidden field will work instead.

In all cases where I have seen custom attributes use the internals of the system have bled into the html.

Chuck Conway hidden inputs ;)

The answer to this one might be a bit subjective, but I'll share from my experience. Every browser I've ever used appropriately ignores any extra attributes that aren't part of an HTML spec - even very early versions of IE did this correctly. I've found it a handy technique for DOM manipulation, and recently as a helper for jQuery selectors. However, it's got some drawbacks and should be used sparingly. One of the drawbacks would be if you're using XHTML. In that case, you can't just make up your own stuff - you'd have to have a DTD or XSD that defines the attributes and then reference the schema definition as an XML namespace.

Just as an alternative suggestion... if it feels a little off to you to fake your own attributes, perhaps you might consider assigning a unique ID to your HTML elements using the ID attribute, which is valid on most if not every tag. Then, you can use a javascript dictionary to associate your element IDs with the variables you're trying to embed. The only reason you're using this is for javascript, right? I can't imagine any other reason this technique would be useful.

One more alternative would be to use a hidden tag as another poster suggested and then use jQuery's .next() selector


Your code will not be valid if the attribute is not in the spec. I suggest looking into storing data on elements using jquery's data storage:

Ionut Popa