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 Vue.js 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 [OPTIONS] [FILENAME..] [DIR..]

Configuration

Create .htmlvalidate.json:

{
  "extends": [
    "html-validate: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

Bundles

The library comes in four flavours:

• CommonJS full (dist/cjs/index.js)
• CommonJS browser (dist/cjs/browser.js)
• ESM full (dist/es/index.js)
• ESM browser (dist/es/browser.js)

The browser bundle contains a slimmed version without CLI and NodeJS dependencies.

/* automatically determine build based on `browser` export condition */
import { ... } from "html-validate";

/* explicitly use nodejs bundle */
import { ... } from "html-validate/node";

/* explicitly use browser bundle */
import { ... } from "html-validate/browser";

See running in browser for details about getting HTML-Validate running in a browser environment.

Developing

Prerequisites

• NodeJS 18
• NPM 7

Test

Testing is done using jest.

npm test

or call jest directly.

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

Lint

Linting is done using ESLint.

npm run eslint

or call eslint directly.

Build

npm run build

To build documentation use:

npm run docs

The documentation can be served locally using:

npm start

Changelog

8.17.0 (2024-03-19)

Features

• rules: new rule name-pattern (f2209c0), closes #216
• rules: support multiple patterns in id-pattern, class-pattern and name-pattern rules (15dd007)

Bug Fixes

• meta: handle regexp with slash inside (4c88396), closes #242
• rules: input-missing-label now ignores <input> hidden by css (c40e48e), closes #241
• rules: input-missing-label now tests if <label> is inert or hidden by css (d0d6f40)
• rules: show pattern name in id-pattern, class-pattern and name-pattern rules (4bd70ab)