html-validate

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.9.0 (2024-01-08)

Features

• elements: new property focusable to mark elements as focusable (c59c8b2)
• rules: new rule hidden-focusable (243e7fb)
• rules: new rule unique-landmark (187be1e)

Bug Fixes

• api: remove internal listeners property from public API (303e5d5)
• dom: ancestor with role="presentation" no longer counts decendants as missing from a11y tree (cc72da1)
• dom: handle role="none" as a synonym for role="presentation" (b1d7b50)
• dom: interactive and focusable elements ignore role="presentation" (017308f)
• rules: better error description for require-sri (ffc3695)
• rules: rule wcag/h30 no longer requires text on <a hidden> (a20cc84)
• rules: rule wcag/h30 no longer requires text on links with display: none or visibility: hidden (36ff07e)
• rules: rules wcag/h32 handles <button> without explicit type (84c6a6e)