This site uses cookies for analytics. By continuing to browse this site, you agree to this use.
A JS Foundation Project

Nu HTML Test

Nu HTML Test (html-checker)

html-checker validates the markup of a website against the Nu HTML checker.

Why is this important?

Serving valid HTML nowadays have been commonly overlooked these days. By running the HTML documents through a checker, it’s easier to catch unintended mistakes which might have otherwise been missed. Adhering to the W3C’s standards has a lot to offer to both the developers and the web users: It provides better browser compatibility, helps to avoid potential problems with accessibility/usability, and makes it easier for future maintenance.

The Nu Html Checker(v.Nu) serves as the backend of html5.validator.nu, and validator.w3.org/nu. It also provides a web service interface.

This hint interacts with this service via request and can test both remote websites and local server instances.

What does the hint check?

According to the Nu Html checker documentation, the positive cases contain two sections:

  • Markup cases that 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.

  • Markup cases that 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.

For explanation behind those requirements, please check out:

Can the hint be configured?

By default, only the first occurrence of each error/warning is reported when validating the markup. However, you can configure the hint to view the complete list.

The following hint configuration in the .hintrc file will enable the full-list view of errors/warnings reported by the HTML checker:

{
"connector": {...},
"formatters": [...],
"hints": {
"html-checker": ["error", {
"details": true
}],
...
},
...
}

You can ignore certain error/warning by setting the ignore option for the html-checker hint. You can either pass in a string or an array that contains all the messages to be ignored.

E.g. The following configuration will ignore the errors/warnings with the message of Invalid attribute:

{
"connector": {...},
"formatters": [...],
"hints": {
"html-checker": ["error", {
"ignore": "Invalid attribute"
}],
...
},
...
}

Alternative, you can pass in an array if you have more than one type of message to ignore:

{
"connector": {...},
"formatters": [...],
"hints": {
"html-checker": ["error", {
"ignore": ["Invalid attribute", "Invalid tag"]
}],
...
},
...
}

You can also override the default validator by passing in the endpoint of an alternative validator. However, you need to make sure that this alternative validator exposes the same REST interface as the default one.

{
"connector": {...},
"formatters": [...],
"hints": {
"html-checker": ["error", {
"validator": "https://html5.validator.nu"
}],
...
},
...
}

How to use this hint?

To use it you will have to install it via npm:

npm install @hint/hint-html-checker

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm's documentation.

And then activate it via the .hintrc configuration file:

{
"connector": {...},
"formatters": [...],
"hints": {
"html-checker": "error",
...
},
"parsers": [...],
...
}

Further Reading