CODEWITHSUNDEEP
htmlattributesmarkup
ExClouds
ExClouds

Reputation: 567

Are custom HTML attributes without data- prefix a valid attribute?

I recently found AngularJS. I noticed that they use custom attribute prefix ng-.

From articles like this one or this answer the only valid (I'm not talking about the fact that they work anyway) prefix to use is data-.

How can it be that these million projects and companies use an invalid prefix for custom HTML element attributes?

Upvotes: 46

Views: 14768

Answers (3)

Manngo
Manngo

Reputation: 16281

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.

Upvotes: 50

Fusion
Fusion

Reputation: 5462

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.

Upvotes: 6

Richard
Richard

Reputation: 16752

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

Upvotes: 8

Related Questions