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

问题

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

回答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 two 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

The data- attribute prefix has two benefits:

• HTML validators will ignore the attribute for validation purposes
• JavaScript will gather these attributes into a special data object for easy access

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.

回答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

回答3:

Official W3C validator does not consider ng-customattr or x-customattr attributes, or customattr as valid.

Statement, that even data- prefixed custom attributes are invalid are false, check this W3C specification

However it is worth to notice projects like Laravel's Dusk encourage developers to use custom, non data- prefixed attributes.

It is worth noting, that official W3C specifications are not exclusive way how to build HTML page, but rather reccommended ones. I would dare to say, there are unspoken standards, which are widely used on web and yet tolerated by all the major browsers, even though they are not mentioned in w3c specifications. According to this article, custom named html attributes are disregarded, but yet still accessible, therefore a viable option.

I afraid there is no firm ground below our feet - By naming your parameter prefixed by data-, you are doing things by reccomended way - avoiding possible deprecation warnings, or another issues, if browsers will be in future more strict. However standards can change, and since custom-way named attributes are widespread over the web, they can became standard themselves.

So whats the solution?

If you really want to use custom, non data- prefixed attributes in HTML, it would be good to make a research about general browser support (Of find someone who already did this and published his research results in some article), and make your decision based on that - just like with any other HTML/CSS/JS feature.

来源：https://stackoverflow.com/questions/24932391/are-custom-html-attributes-without-data-prefix-a-valid-attribute