How are the attribute prefixes “x-” and “data-” used in AngularJS

Question

I\'m new to Angular and trying to understand what the \"x-\" and \"data-\" prefixes mean. In the directives documentation (http://docs.angularjs.org/guide/directive) it says

Answer 1

The HTML5 spec allows for arbitrary attributes as long as they're prefixed with data- like so:

Whereas this would be invalid HTML5:

For more information on data- attributes, have a look here.

As for "x-" attributes, I think you mean "x:" attributes and elements, which are specific to XHTML validation...

To expand on this, if you were to (for some reason) be using XHTML, you can define custom attributes with namespacing like so (and I'm just summarizing the gist here):

where the URL in xmlns is really just to prevent conflicts between like elements. Also, a DTD for the custom elements and attributes could be provided for validation purposes as a part of your DOCTYPE declaration.

*behavior in browsers is going to vary with this xmlns approach.

In summary, though: With most browsers released in the last three years, or IE8+ you're not going to have to worry about any of these things. Only in very specific situations will you really care.