More than 1 year has passed since last update.

オフラインHTMLバリデーター「HTML-validate」がいい感じ　項目一覧もあるヨ

Last updated at 2023-08-31Posted at 2020-04-21

はじめに

こんにちは、ウィケです。
皆さんは普段、出来上がったHTMLをどうやってチェックしていますか？
W3Cのバリデーターにかけたり、開発環境にリンターを仕込んでおいたり、
はたまた特に何もしていないよーなどいろいろな状況におられることかと思います。

ここのところ、CSSはstylelint、JSはeslintかけとけばオッケー！という風潮になってきているなと感じているのですが、
HTMLはコレ！というものがないのが悩みでした（しいていえばW3CのMarkup Validation Serviceですかね）。
でいろいろ調べていたところ、HTML-validateがいい感じだと思ったのでメモしておきます。

HTML-validateがオヌヌメの理由

本家サイト: HTML-validate
npmのページ: html-validate - npm

オフラインで使える

これよ～これ。今回の私的決め手です。
お仕事でWeb制作をするとき、内容的にはW3CのMarkup Validation Serviceを利用するので充分だと思うのですが、公開前のサイト情報を外部に送信している点が気になっていました。
もちろん、現状それが危ない！ということはないのですが、なにかの手違いが起きたら怖いですし、外部に出さずに完結できたらいちばんいいよねと思っていたので、オフラインで使えるのは嬉しいです。
（調べたところ、W3Cのチェッカーを自前のサーバーに構築することができるようです。それができればより安全ですが、Javaができないので白目をむきながら見送らせていただきました）

頻繁に更新されている

今のところ数日に１回のペースでバグフィックスなどが行われています。数年単位で放置されているツールも多いのでありがたいことです。

詳細にチェックしてくれる

eslintよろしくrecommended（おすすめ設定）があるのですが、それだけでもかなり細かくチェックしてくれます。
HTMLの簡単なlintツールはたくさんありますが、タグの閉じミスなどは判別してくれても、入れ子のルールを守っているか（例えば、<p>の中に<div>がある等）はチェックしてくれないものがほとんどです。
凡ミスも文書構造もチェックしてくれるのはありがたいです。

いろんなツールに対応している

npm-scriptsで使うのがいちばんお手軽ですが、VSCodeのプラグインやVue、Angularなどいろいろなツールに対応しています。
公式のUser guideにわかりやすくまとめられています（英語ですが）。

項目一覧

項目名のリンクで公式の解説ページに飛べます。

執筆時のバージョン: 2.19.0

Available rules

項目	内容	備考
close-attr	Disallow end tags from having attributes 終了タグに属性がついていないか	recommended
close-order	Require elements to be closed in correct order 正しい順序で要素が閉じられているか	recommended
deprecated	Disallow usage of deprecated elements 非推奨の要素を使用していないか	recommended NG: <center>
deprecated-rule	Disallow usage of deprecated rules 非推奨のルールを使用していないか	recommended このバリデーター内の古いルールを使っていないかということ
doctype-html	Require usage of "html" doctype doctype宣言はhtmlか	recommended `<!DOCTYPE html>`のみOK レガシーな宣言は許容されない
element-name	Disallow invalid element names 無効な要素名がないか	recommended カスタム要素のルール・`a-z`で始まっているか・`-`（ダッシュ）が含まれているか
meta-refresh	Require meta refresh to have 0 second delay `meta http-equiv="refresh"`の遅延は0秒か	recommended 他ページにリダイレクトさせるときは0秒を指定するリロードは許可されない
no-conditional-comment	Disallow usage of conditional comments 条件付きコメントがないか	recommended NG: `<!--[if IE]>`
no-deprecated-attr	Disallow usage of deprecated attributes 廃止された属性を使っていないか	recommended
no-dup-attr	Disallow duplicated attributes 属性が重複していないか	recommended
no-dup-class	Disallow duplicated classes クラスが重複していないか	recommended
no-dup-id	Disallow duplicated IDs IDが重複していないか	recommended
no-raw-characters	Disallow the use of unescaped special characters 特殊文字はエスケープされているか	recommended `<` → `<` `>` → `>` `&` → `&`
no-redundant-role	Disallow usage of redundant roles 冗長なroleを指定していないか	recommended NG: `<main role="main">`
no-style-tag	Disallow usage of <style> tag <style>タグを使用していないか
no-unknown-elements	Disallow usage of unknown elements 不明な要素を使用していないか
prefer-button	Prefer to use <button> instead of <input> for buttons buttonに<input>ではなく<button>を使用しているか	recommended NG: `<input type="button">` OK: `<button type="button"></button>`
prefer-tbody	Prefer to wrap <tr> inside <tbody> <tr>を<tbody>で囲っているか	recommended
require-sri	Require SRI for resources リソースにSRIがあるか	例: jQueryをCDNで利用するときの`integrity`属性
script-type	Require valid type for `<script>` `<script>`に妥当なtypeがあるか	recommended
unrecognized-char-ref	Disallow unrecognized character references 認識されない文字参照を使用していないか	recommended

Content model

項目	内容	備考
attribute-allowed-values	Validate permitted attribute values 要素の属性が正しいか	recommended
element-permitted-content	Validate permitted content from content model 要素のコンテンツモデルが正しいか	recommended
element-permitted-occurrences	Validate permitted number of occurrences from content model 要素の出現回数が正しいか	recommended ひとつのtableにtfootはひとつだけ等
element-permitted-order	Validate required order from content model 要素の順序が正しいか	recommended
element-required-attributes	Ensure required attributes are set 要素に必須の属性があるか	recommended 中身は空でもOK
element-required-content	Ensure required elements are present 必須の要素があるか	recommended `<body>`やhead内`<title>`等
script-element	Require end tag for `<script>` `<script>`の閉じタグがあるか	recommended
void-content	Disallow void element with content 空要素に閉じタグがないか	recommended NG: `<img></img>`

Accessibility

項目	内容	備考
empty-heading	Require headings to have textual content 見出し要素にテキストコンテンツが含まれているか	recommended
empty-title	Require title to have textual content `<title>`にテキストコンテンツが含まれているか	recommended
input-missing-label	Require input to have label 入力要素にlabelが関連付けられているか	`input`や`select`等を`label`で囲うかforで関連付ける
prefer-native-element	Prefer to use native HTML element over roles roleではなくネイティブのHTML要素を使っているか	recommended HTMLで出来るならやろうという意味 NG: `<div role="main">` OK: `<main>`
svg-focusable	Require <svg> to have focusable attribute svg要素にfocusable属性があるか	recommended IE用に明示が必要らしい
wcag/h30	WCAG 2.1 H30: Providing link text リンクにテキストが含まれているか	recommended 以下のどれかが必要・リンク内テキスト・リンク内画像のalt ・リンク本体or子要素のaria-label
wcag/h32	WCAG 2.1 H32: Providing submit buttons `form`に送信ボタンがあるか	recommended
wcag/h36	WCAG 2.1 H36: Require alt text on images used as submit buttons 送信ボタンとして使われる画像にaltテキストが入っているか	recommended
wcag/h37	WCAG 2.1 H37: Using alt attributes on img elements imgにaltがあるか	recommended
wcag/h67	WCAG 2.1 H67: Using null alt text and no title attribute on img elements imgでaltが空の場合にtitleを使用していないか	recommended
wcag/h71	WCAG 2.1 H71: Providing a description for groups of form controls フォーム入力項目のグループに説明があるか	recommended `<fieldset>`のはじめに`<legend>`が必要

SEO

項目	内容	備考
long-title	Require title not to have too long text タイトルが長すぎないか	recommended

Style

項目	内容	備考
attr-case	Require a specific case for attribute names 属性名が指定された形式か	recommended 初期設定ではlowercase NG: `<p ID="foo">` OK: `<p id="foo">`
attr-quotes	Require attribute quoting 属性の引用符が指定された形式か	recommended 初期設定では、属性値に`"`が含まれていない場合は`"`を使用する
attribute-boolean-style	Require a specific style for boolean attributes boolean属性が指定された形式か	recommended 初期設定では値を省略する OK: `<input required>` NG: `<input required="">` NG: `<input required="required">`
attribute-empty-style	Require a specific style for empty attributes 値のない属性が指定された形式か	recommended 初期設定では空の文字列を省略する OK: `<a download></a>` NG: `<a download=""></a>`
class-pattern	Require classes to match a specific pattern クラスが指定された形式か	オプションで `kebabcase`, `camelcase`, `underscore`, 正規表現が設定できる
element-case	Require a specific case for element names 要素が指定された形式か	recommended オプションで `camelcase`, `lowercase`, `pascalcase`, `uppercase` が設定できる。複数設定（どれかに当てはまればOK）もできる
id-pattern	Require IDs to match a specific pattern IDが指定された形式か	オプションで `kebabcase`, `camelcase`, `underscore`, 正規表現が設定できる
no-implicit-close	Require elements with optional end tags to be explicitly closed 要素の終了タグを省略していないか	recommended NG: `<li>hoge` `<li>fuga` OK: `<li>hoge</li>` `<li>fuga</li>`
no-inline-style	Disallow inline style インラインスタイルを記述していないか	recommended
no-self-closing	Disallow self-closing elements 要素にコンテンツがない場合も閉じタグがあるか	recommended OK: `<div></div>` NG: `<div />`
no-trailing-whitespace	Disallow trailing whitespace 行末に空白がないか	recommended
void	Disallow void element with content 空要素にコンテンツや終了タグがないか	recommended この項目は非推奨ぽい他の項目（ `void-content`, `void-style`, `no-self-closing` ）でチェックされる
void-style	Require a specific style for closing void elements 空要素の閉じ方が指定された形式か	recommended 初期設定では終了タグは省略する OK: `<input>` NG: `<input />`

Document

項目	内容	備考
heading-level	Require headings to start at h1 and be sequentia 見出し要素がh1から始まり、順序が正しいか
missing-doctype	Require document to have a doctype doctype宣言があるか
no-missing-references	Require all element references to exist 参照する要素が存在しているか	`<label for="hoge">`などと指定したときに`hoge`が存在しないのはNGという意味