html-validate

What is html-validate?

html-validate is a powerful and highly configurable HTML linter that helps developers ensure their HTML code adheres to best practices and standards. It can catch common mistakes, enforce coding standards, and improve the overall quality of HTML code.

What are html-validate's main functionalities?

Basic HTML Validation

This feature allows you to validate a string of HTML code. The example demonstrates how to validate a simple HTML string and log the validation report, which will include any errors or warnings found in the HTML.

const HtmlValidate = require('html-validate');
const htmlvalidate = new HtmlValidate();
const report = htmlvalidate.validateString('<div><p>Unclosed tag</div>');
console.log(report);

Custom Rule Configuration

This feature allows you to configure custom rules for validation. The example shows how to set up rules to flag inline styles as errors and duplicate IDs as warnings.

const HtmlValidate = require('html-validate');
const htmlvalidate = new HtmlValidate({
  rules: {
    'no-inline-style': 'error',
    'no-dup-id': 'warn'
  }
});
const report = htmlvalidate.validateString('<div id="test" style="color: red;"></div>');
console.log(report);

Integration with Build Tools

This feature demonstrates how to integrate html-validate with build tools like Grunt. The example shows a Grunt configuration that validates all HTML files in the 'src' directory.

module.exports = function(grunt) {
  grunt.initConfig({
    htmlvalidate: {
      options: {},
      src: ['src/**/*.html']
    }
  });
  grunt.loadNpmTasks('grunt-html-validate');
  grunt.registerTask('default', ['htmlvalidate']);
};

Other packages similar to html-validate

eslint-plugin-html

eslint-plugin-html is an ESLint plugin that allows you to lint and fix inline scripts contained in HTML files. It integrates with ESLint, providing a way to enforce JavaScript coding standards within HTML files. Compared to html-validate, it focuses more on JavaScript within HTML rather than HTML structure itself.

htmlhint

htmlhint is another HTML linter that helps you detect errors and potential issues in your HTML code. It is similar to html-validate but offers a different set of rules and configurations. htmlhint is known for its simplicity and ease of use, making it a good alternative for basic HTML linting needs.

stylelint

stylelint is a modern linter that helps you enforce consistent conventions and avoid errors in your stylesheets. While it primarily focuses on CSS, it can be configured to lint inline styles within HTML files. Compared to html-validate, stylelint is more specialized in CSS linting.

README

html-validate

Offline HTML5 validator. Validates either a full document or a smaller (incomplete) template, e.g. from an AngularJS or React component.

Features

• Can test fragments of HTML, for instance a component template.
• Does not upload any data to a remote server, all testing is done locally.
• Strict and non-forgiving parsing. It will not try to correct any incorrect markup or guess what it should do.

Usage

npm install -g html-validate
html-validate FILENAME..

Configuration

Create .htmlvalidate.json:

{
  "extends": [
    "htmlvalidate:recommended"
  ],

  "rules": {
    "close-order": "error"
    "void": ["warn", {"style": "omit"}]
  }
}

Example

<p>
  <button>Click me!</button>
  <div id="show-me">
    Lorem ipsum
  </div>
</p>

  1:1  error  Element <p> is implicitly closed by adjacent <div>  no-implicit-close
  2:2  error  Button is missing type attribute                    button-type
  6:4  error  Unexpected close-tag, expected opening tag          close-order

Test

Testing is done using jest.

npm test

or call jest directly.

Some tests are autogenerated from documentation examples, use grunt docs to build those before running.

Lint

Linting is done using eslint.

npm run lint

or call eslint directly.

Build

grunt build
grunt docs

Changelog

0.21.0 (2019-02-17)

Breaking changes

• button-type is replaced with element-required-attributes.

Features

• new rule element-required-attributes replaces button-type and allows any element to contain requiredAttributes metadata.
• support foreign elements. The body of the foreign element will be discarded from the DOM tree and not trigger any rules.
• CLI write a more verbose message when unhandled exceptions are raised.
• --dump-events output reduced by hiding element metadata and compacting location data.
• use jest snapshots to test element metadata as it is more maintainable.

Bugfixes

• allow <area shape="default"> (fixes #31)