4

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.

Stafford Williams
  • 9,696
  • 8
  • 50
  • 101
Andy Barron
  • 246
  • 2
  • 9

1 Answers1

2

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.

Joseph
  • 117,725
  • 30
  • 181
  • 234
  • I've seen a [lot](http://stackoverflow.com/questions/5032841/html5-custom-attributes-why-would-i-use-them) of [literature](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) referring to `data-*` as the primary way to store additional semantic data in HTML. Additionally, the [Official W3C HTML5 validator](https://validator.w3.org/) emits an error on custom attributes without `data-` in front. But you're right: It doesn't seem to be in the spec... Has it changed? – Andy Barron Sep 02 '15 at 01:07
  • 1
    @AndyBarron found the part for `data-*` attributes (was just reading a part of the entire doc). But then, it doesn't force you to use them. – Joseph Sep 02 '15 at 01:28
  • Weird wording in the spec, but that answers it! – Andy Barron Sep 02 '15 at 04:43