So what if custom HTML attributes aren't valid XHTML?

The ramification is that w3c comes along in 2, 5, 10 years and creates an attribute with the same name. Now your page is broken.

HTML5 is going to provide a data attribute type for legal custom attributes (like data-myattr="foo") so maybe you could start using that now and be reasonably safe from future name collisions.

Finally, you may be overlooking that custom logic is the rational behind the class attribute. Although it is generally thought of as a style attribute it is in reality a legal way to set custom meta-properties on an element. Unfortunately you are basically limited to boolean properties which is why HTML5 is adding the data prefix.

BTW, by "basically boolean" I mean in principle. In reality there is nothing to stop you using a seperator in your class name to define custom values as well as attributes.

class="document docId.56 permissions.RW"


Yes you can legally add custom attributes by using "data".

For example:

<div id="testDiv" data-myData="just testing"></div>

After that, just use the latest version of jquery to do something like:

alert($('#testDiv').data('myData'))

or to set a data attribute:

$('#testDiv').data('myData', 'new custom data')

And since jQuery works in almost all browsers, you shouldn't have any problems ;)

update

  • data-myData may be converted to data-mydata in some browsers, as far as the javascript engine is concerned. Best to keep it lowercase all the way.

Validation is not an end in itself, but a tool to be used to help catch mistakes early, and reduce the number of mysterious rendering and behavioural issues that your web pages may face when used on multiple browser types.

Adding custom attributes will not affect either of these issues now, and unlikely to do so in the future, but because they don't validate, it means that when you come to assess the output of a validation of your page, you will need to carefully pick between the validation issues that matter, and the ones that don't. Each time you change your page and revalidate, you have to repeat this operation. If your page validates entirely then you get a nice green PASS message, and you can move on the next stage of testing, or to the next change that needs to be made.