AngularJS and HTML Validation

by | | | 2 Comments

So I've started learning more about AngularJS. However, one thing about AngularJS has continued to bug the hell out of me. It has to do with all those 'ng-' attributes that riddle your HTML and make the code invalid. Not that tag attributes are bad per se. It's just that an attribute with a 'ng-' prefix isn't consider least not yet. So the question becomes: How do I make my HTML valid with AngularJS? 

The answer is really quite simple: just add a 'data-' prefix to all your 'ng-' attributes. 'ng-app' becomes 'data-ng-app' and so on.  I tested this out with the AngularJS version of the TodoMVC app and it works just fine. The only thing extra I had to do was convert the 'ng-pluralize' custom tag into a span and use attributes to initialize the 'ng-pluralize' directive. Other than that, it validated well and no issues with the app.

AngularJS is a beast; an 800 pound gorilla for sure. Lots to learn! But knowing that I can make it work in a highly valid way is definitely good to know.

Post your comment


  • Gravatar for Jeff Whitfield

    You're right that HTML validation isn't all that important. There are certainly times when validation can be safely ignored. However, something as simple as data attributes shouldn't get in the way of at least keeping things in check when it comes to doing basic validation checks. If it's as simple as adding a 'data-' prefix on all attributes then the issue is moot. All it does for me is solve the problem of having a bunch of stupid errors popping up when I do validate my code.

    Beyond that, semantics can't be ignored either. Take the recent Google Penguin updates. What Google has done is basically force SEO people to start caring about semantics and start writing good content. Basically means that, yes, we have to think about well-written, semantic HTML and add schema markup where appropriate. Having what appears to be invalid data attributes just gets in the way of achieving that goal. Might as well keep things as standardized as possible, right?

    Posted by Jeff Whitfield,

  • Gravatar for Silent Works

    I am not sure why your HTML being valid would matter for the amount of interaction you would be adding to a website/webapp if you are using AngularJS. I think as long as your code works across all modern browsers and the user can interact with it from whatever device they use then w3c validation shouldn't matter that much.

    I think sometimes we overdo the whole semantic web thing. Make usable, user-friendly platform agnostic stuff and that should be good enough. Standards are good but some standards don't fit in every medium.

    Posted by Silent Works,

RSS feed for comments on this page | RSS feed for all comments