What happens if an invalid/nonstandard HTML attribute is used (for data)?

Question

I have a strange question.

However, I want to know what happen when I use invalid attribute on html 5?

For example, if I want to add a attr 'City' on a tag.

<div data-city="etc"></div> 

is the valid way.

However, there is perfectly working fine with this way

<div city="etc"></div> 

I want to know what is the result that I should not use 'city' instead of 'data-city'??

If only for use for passing data for javascrpit, can I use only 'city' in general??

Thank you very much for your advice.

Answer 1

The HTML 4.01 specification recommends, in its Notes on invalid documents, that if a browser “encounters an attribute it does not recognize, it should ignore the entire attribute specification (i.e., the attribute and its value)” and “provide[s] support for notifying the user of such errors”.

In practice, browsers ignore unknown attributes as far as HTML alone is considered. However, they do not ignore them in CSS; an attribute selector like [city] matches the element, in modern browsers. And they do not ignore them in JavaScript, but they are treated differently from conforming attributes city does not become a property of the element node, but it becomes a property of the attributes property, so it can be used via the getAttribute and setAttribute methods.

Such processing violates the HTML 4.01 spec, and there is no guarantee that it will take place on all browsers. The HTML5 drafts do not seem to address this issue: they specify rules for handling parsing errors and obsolete features, but not undefined attributes.

Moreover, some day some future spec, or some browser, might start recognizing city as an attribute name, possibly in a manner that seriously conflicts with your ideas. Using a cryptic name might make the possibility of such clashes very small. But the use of data-city avoids the problem, since data-* attributes are intended for site-specific extensions and are guaranteed to never clash with any standard attribute.

Answer 2

The only thing that will happen is it will not validate.

Javascript will still be able to find it. Although there are some data- specific functions that it may not work with.

Proof: http://jsbin.com/ujusel/1/edit

Answer 3

Unfortunately, this is not correct. However, all (modern) browsers will be okay with this (as far as being able to display it and keep it in the DOM) as they strive to be compatible with all (even the bad) HTML code, but it will not be a true attribute. Your code will not validate as true W3 specification HTML 5 code, but it should still work.

If you need to use 'city', you may want to use XHTML, where you can specify your own attributes to your own elements.