What are the concrete risks of using custom HTML attributes?

Question

This subject turned into a heated discussion at the office, so I'm interested to learn what you think.

We are working on a web app that only targets some specific browsers. These browsers presently include different flavors Opera 9 and Mozilla 1.7.12. In the future we likely also have to support Opera 10 and different flavors of WebKit. But it's very unlikely we are ever going to have to deal with any version of IE.

Our web app declares HTML 4.0 strict in it's doctype.

Recently, I proposed as a solution to a specific problem to use custom attributes in the HTML. I proposed something that would look like this:

<span translationkey="someKey">...</span>

Since this is not valid HTML 4, it did not go down well with our HTML guys, and we got into an argument.

My question is this: What - if any - are the risks of using custom attributes? I know the page won't validate, but don't all browsers just ignore attributes they do not know? Or is it conceivable that some browsers will change to "quirks mode" and render the page as if it was something other than strict HTML 4.0?

Update:

Hilited the actual question posed.

Answer 1

There are no browser limitations/risks. Only the w3 validator will bark, but barking dogs doesn't bite.

The w3 spec says the following:

• If a user agent encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value).

IE will also not render in quirks mode or so as some may think. It will only do that on invalid/forced doctypes, not on invalid attributes.

However, keep in mind that some Javascript libraries/frameworks will "invisibly" add/use custom HTML attributes in the DOM tree, such as several jQuery plugins do. This way you may risk collisions in attributes because it "by a coincidence" uses an attribute with the same name as you do for your own purposes. Sadly this is often poorly or even not documented at all.

Answer 2

HTML 5 allows custom attributes using a 'data-' prefix, see http://ejohn.org/blog/html-5-data-attributes/