Menu
Using this module, you can easily convert the HTML attributes of Angular (and custom prefixes you want) to valid HTML5 tags that start with data-something . You can add additional prefixes using the option customPrefixes . This plugin plays nice with type="text/ng-template" and won't break it.
Some attributes from HTML4 are no longer allowed in HTML5 at all and they have been removed completely. img and iframe. caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr. table, tr, td, th and body.
As explained in the previous chapter, elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only.
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.
It won't validate but it will render.
HTML5 is designed to be very forgiving (contrary to XHTML). This is in part so that "older" HTML5 browsers can allow new elements (as well as badly formatted HTML) which that version doesn't support yet without breaking the page.
This can of course be "exploited" to introduce custom tags.
That being said - you can also do this with HTML4.
As mentioned in comments: you also have the ability to prefix any attributes in an ordinary tag with data- and it will validate.
From W3C specification:
Authors must not use elements, attributes, or attribute values that are not permitted by this specification or [other applicable specifications][1], as doing so makes it significantly harder for the language to be extended in the future.
However, while the initial source of the page body (before angular processes an ng-app element) may not adhere to the W3C standards, if you use replace: true in directives, custom elements are replaced by a template HTML, which can be valid. So, in this case, you can think about an angular element as just a placeholder that is replaced with the terminal HTML output.
This is kinda opinionated, but so is the topic. The web is now what we make it, we have the ability to create/style/modify non-spec elements. And the Angular team may not really care about specs, its the cutting edge, they allow you to do what you want. That being said, you can do anything and everything in Angular with markup that will validate and conforms to the HTML5 spec (as in they support it both ways).
AngularJS don't really care, it's totally up to you. If you want your directive to be compatible with olds IE, you need to use <div data-hello-world> instead of <hello-world> and put data- in front of all your custom attributes.
HTML5 is still not 100% the norm, but it's slowly becoming the norm.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With