CODEWITHSUNDEEP
javascriptangularjshtmlstandardsweb-standards
Andy Barron
Andy Barron

Reputation: 256

Should AngularJS apps be HTML5-compliant?

I'm getting acquainted with AngularJS, and I've noticed that it is possible to make your template code HTML5-compliant by prefixing your directives with data-. (For example, data-ng-repeat="..." instead of ng-repeat="...".)

My first instinct was to prefix all of my directives as such, but I've been wondering: Is there a compelling reason to do so? Are there any confirmed cases of browsers malfunctioning on invalid HTML attributes? Typing data- in front of everything gets pretty tedious after a while, and it makes the HTML templates a lot less readable.

Upvotes: 4

Views: 451

Answers (1)

Joseph
Joseph

Reputation: 119867

Attribute names must consist of one or more characters other than the space characters, U+0000 NULL, U+0022 QUOTATION MARK ("), U+0027 APOSTROPHE ('), ">" (U+003E), "/" (U+002F), and "=" (U+003D) characters, the control characters, and any characters that are not defined by Unicode. In the HTML syntax, attribute names, even those for foreign elements, may be written with any mix of lower- and uppercase letters that are an ASCII case-insensitive match for the attribute's name.

http://www.w3.org/TR/html/syntax.html#attributes-0

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

http://www.w3.org/TR/html5/dom.html#custom-data-attribute

After more digging, I found the part for data-* attributes. However, it doesn't really say it's a "must". It's more like "we recommend using it".

Afaik, attributes that are not recognized by the browser are ignored but are still accessible via the DOM object's getAttribute method and attributes property. data-* are normally preferred for semantics and convenience, especially when using dataset.

On a similar note, older versions of angular even recommends attribute name restrict for directives as alternative to element name restrict for IE8 compatibility. Directives normally have custom names, which should be an indicator that custom attribute names are fine.

Upvotes: 2

Related Questions