are custom html attributes without data-* prefix a valid attribute?

Question

Okey, so, recently, i found this: https://angularjs.org/

I noticed that they use custom attribute prefix "ng-"

From articles, like: http://html5doctor.com/html5-custom-data-attributes/

or even stackoverflow: https://stackoverflow.com/a/17091848/2803917

And there are many more, the only VALID (im not talking about the fact, that they work anyways) prefix to use is "data-".

So, could someone explain to me, how can it be, that these, million projects and companies, uses an invalid prefix for custom html element attributes and no one seems to care? Or am i missing something?

I would really appreciate some thoughts, or even sources of info, not just texts like "everyone does it" and "don't bother and leave it".

Answer 1

This is an old question, but the following may be helpful.

In principle, you can create any attributes you want, though you can’t expect the browser to know what to do with them. This is true both in HTML:

<p thing="whatever" … </p> 

and in JavaScript

//  p = some element p.setAttribute('thing','whatever'); 

You can expect CSS to take your custom attribute seriously, as long as you use the attribute selector:

…[thing] {     … } 

Of course, if you start making up your own attributes, you run into three problems:

• An HTML validator won’t know whether your new attribute is deliberate or an error, and will assume that it’s incorrect
• You are competing with other code which is also making up its own attributes
• At some point in the future it’s possible that your made-up attribute name becomes a real-life attribute, which would cause further problems

The data- attribute prefix has three benefits:

• HTML validators will ignore the attribute for validation purposes
• JavaScript will gather these attributes into a special data object for easy access
• You don’t run the risk of competing with real attribute names

Effectively the data- prefix allows you to work with an otherwise invalid attribute by telling the validator to overlook it.

This will not solve the problem of competing attribute names, so you’re pretty much on your own. However it is common practice to at least include a prefix specific to a library.

Finally to the question of being valid.

If, by valid, you mean will it pass a standard (modern) HTML validator, the answer, is only the data- attributes will work this way. If, on the other hand, you mean will it work, then both CSS and JavaScript will happily work with other made up attributes, as long as you don’t expect the browser to guess what you mean.

Answer 2

Custom attributes must start with data- or x- or they are invalid. This might cause problems in future browsers, and HTML validators will say they're invalid.

See: What is the difference between ng-app and data-ng-app?

And: http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#embedding-custom-non-visible-data-with-the-data-attributes