Login/Register
Should I care about W3C validation?
Asked Answered
Solved angularjsvalidationw3c-validation
N

9

31

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

<!DOCTYPE html>
<html>
   <head>
    <meta charset='utf-8'>
<script src="http://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?

Nicolasanicolau answered 4/9, 2013 at 7:5 Comment(2)
The best JavaScript framework is drumroll: NONE! Requires dumping an extra grand total of zero bytes and zero HTTP requests to the client since it already supports (gasp!) JavaScript! Warning: will require you to learn actual standards-compliant JavaScript. One of the most unprofessional things any web/software developer can do is essentially say, "How can we over-complicate our code and weaken it by adding unnecessary dependencies because we didn't bother to learn what we should already know?" – Undersea
@Undersea Totally agreed. – Paperboard
S
49

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.

Selfhood answered 4/9, 2013 at 7:15 Comment(0)
D
48

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.

validator screen shot showing Message Filtering button

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.

Dote answered 13/3, 2015 at 1:23 Comment(6)
Very nice! what would be nice too is to have a way to pass filters to vnu.jar github.com/validator/validator – Pilkington
@Dote any way to get around the 'fatal error: too many messages' (exceeding 1000 ng- errors for example)? – Dewdrop
@KevinSylvestre there is no way to override it it you’re using validator.w3.org/nu but you can if you use the vnu.jar file and run it like java -Dnu.validator.messages.limit=XXXXX ~/vnu.jar some-document-with-a-lot-of-errors.html (where XXXX is some number). For details about the vnu.jar file see validator.github.io/validator and to download it go to github.com/validator/validator/releases/latest. – Dote
Do not, please. The validator is itself a gazillion times more valuable than vue, angular and who knows what kids might come up with next week. As a side note, I totally agree with Marat-Tanalin about the presumed preference of underscore-/dash-prefixed attributes; it is generic, non-discriminatory and easy to implement. – Paperboard
what about the latest Angular 4. how do we validate HTML for that because there are new properties such as (click) and [pattern] etc attached to input – Rhodos
@Pilkington It's possible now, no matter whether you are using the CLI version or setting up you own vnu.jar server: https://mcmap.net/q/412483/-w3c-validation-and-vue-39-s-html-binding-syntax – Fusty
T
5

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>
Torques answered 4/9, 2013 at 7:13 Comment(0)
D
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.

Dote answered 13/3, 2015 at 1:30 Comment(0)
K
2

Use prefix "data-" in your angular app. Example:

<body data-ng-app data-ng-init="name = 'World'">
   <h1>Hello, {{name}}!</h1>
</body>
Kibosh answered 4/9, 2013 at 7:8 Comment(1)
what about in Angular 4? how can the "data-" be added in angular 4 – Rhodos
C
2

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

Comedic answered 5/4, 2014 at 8:3 Comment(0)
C
2

You can install with npm:

$ npm install --save-dev gulp-angular-htmlify
Cloth answered 9/1, 2017 at 8:16 Comment(0)
M
-2

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.

Miterwort answered 7/2, 2014 at 16:38 Comment(0)
R
-2

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>
Raki answered 8/6, 2018 at 7:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.