Should I care about W3C validation?

The question:

I’m learning AngularJS and I found a simple code like this one:

<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>

does not pass W3C validation test, mainly because there are non standard attributes (ng-app, ng-init).

The question is: should I care about W3C validation of my application? Should I abandon AngularJS?

The Solutions:

Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.

Method 1

You could use the data- html5 attribute which is standard and as far as I know works the same for Angular.
Something like:

data-ng-app=""
data-ng-init="xxx"

Will work the same in Angular and are validated by W3C.

Look also at this: ng-app vs. data-ng-app, what is the difference?

Aside from that, from my experience working with standards is always better when your product will be delivered to a possible large crowd (so you’r building a website or a public webapp and so on) with different clients, versions etc.
If you’re building a SPA using angular and maybe phonegap to create a mobile app which will be installed on mobile devices as a native app, standard could not be that important, the important thing is that it will work on your target devices.

Method 2

W3C HTML5 validator maintainer here. We’ve had discussions about how to deal with better facilitating validation of documents that contain custom attributes like Angular’s ng-* attributes—attributes which though while non-standard are still very widely and correctly used, and so having the validator emit “error” messages about them isn’t really helping authors.

One feature I’ve added to the HTML5 validator to mitigate this is a “Message filtering” feature that lets you persistently ignore error/warning messages that aren’t important or useful to you. The frontend is here:

http://validator.w3.org/nu/

After you submit a document for checking, on the results page you’ll see a Message filtering button, and if you press that, you’ll get a list of all the error messages grouped into sets, with Show/Hide checkboxes.

Should I care about W3C validation?

Update 2017-02-06: HTML spec proposal for custom attributes

I added support for custom elements to the HTML Checker (W3C validator)—so, to add support for custom attributes, I could use a mechanism similar to what I used for implementing that.

But the HTML checker can’t be changed to allow custom-attribute names until the HTML spec is updated to allow them. For that, see the proposal in the HTML-spec issue tracker.

Method 3

Wheter you “should” care or not is up to you. There are many pages out there which are not valid HTML.

HTML5 allows custom attributes when prefixed with data-, so you can use one of the other equivalent directives like:

<span data-ng-bind="name"></span>

Method 4

HTML conventions are there to help prevent antipatterns and keep code maintainable.

Yeah. Along those lines, I wrote about that in a little more length recently in a “Why Validate?” section I added to the “About” section of the HTML5 validator:

http://validator.w3.org/nu/about.html#why-validate

The source for the text of that section is here:

https://github.com/validator/validator/blob/master/site/nu-about.html#L160

And pull requests with suggested refinements/additions are welcome.

What I have there currently is this:

The core reason to run your HTML documents through a conformance
checker is simple: To catch unintended mistakes—mistakes you might
have otherwise missed—so that you can fix them.

Beyond that, some document-conformance requirements (validity rules)
in the HTML spec are there to help you and the users of your documents
avoid certain kinds of potential problems. To explain the rationale
behind those requirements, the HTML spec contains these two sections:

To summarize what’s stated in those two sections:

  • There are some markup cases defined as errors because they are
    potential problems for accessibility, usability, interoperability,
    security, or maintainability—or because they can result in poor
    performance, or that might cause your scripts to fail in ways that are
    hard to troubleshoot.
  • Along with those, some markup cases are defined
    as errors because they can cause you to run into potential problems in
    HTML parsing and error-handling behavior—so that, say, you’d end up
    with some unintuitive, unexpected result in the DOM.

Validating your documents alerts you to those potential problems.

Method 5

Use prefix “data-” in your angular app.
Example:

<body data-ng-app data-ng-init="name = 'World'">
   <h1>Hello, {{name}}!</h1>
</body>

Method 6

You can use the build system GulpJs and try a plugin that I wrote that does exactly what you want:

converting ng-directives into data-ng-directives which is the spec of W3C for html5 validation.

It is heavily tested, and found here: https://github.com/pgilad/gulp-angular-htmlify

https://www.npmjs.com/package/gulp-angular-htmlify

Method 7

You can install with npm:

$ npm install --save-dev gulp-angular-htmlify

Method 8

It depends on the size of your project.

Generally, HTML conventions are there to help prevent antipatterns and keep code maintainable.

That particular rule (requiring a tag to prefixed with -data to be a valid attribute) is in my opinion a little extraneous as it tends to promote extra markup that serves no purpose.

I would say, stick to validating your HTML against WC3 conventions if you are working in a big project with lots of developers. Otherwise, there are no real advantages.

Method 9

Try running script on secure domail with the https:

Refer the same below using https:

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
</head>
<body ng-app ng-init="name = 'World'">
    <h1>Hello, {{name}}!</h1>
</body>
</html>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Comment