はじめに
こんにちは、ウィケです。
皆さんは普段、出来上がった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 delaymeta 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 buttonsformに送信ボタンがあるか |
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>fugaOK: <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という意味 |
（英語に全く自信がないので、改善提案いただけると喜びます
）
おわりに
HTMLって昔っからあるのにいつまで経ってもフワフワしてる感じがします。
CSSやJSと比べても、いちばん素人の方の手が入りやすいので、いちばんチェックしたいはずなのですが……。
W3Cのバリデーターに関しては、大企業ほどマニュアルで使うように指定してくるところが多く安定しているイメージです。
逆にイケイケチームは、JSで吐き出すのでもはやHTMLなどアウト・オブ・眼中なイメージです。
でもどちらの場合も最終的に出力されたHTMLを私は見ていますよ
ミテイルゾ