目次
- HTMLHintのルールを解説
- ファイルなしでもエラーにならない
- ルールによっては.htmlhintrcが必要
- 1. doctype-first
- 2. doctype-html5
- 3. head-script-disabled
- 4. style-disabled
- 5. title-require
- 6. attr-lowercase
- 7. attr-no-duplication
- 8. attr-no-unnecessary-whitespace
- 9. attr-unsafe-chars
- 10. attr-value-double-quotes
- 11. attr-value-not-empty
- 12. alt-require
- 13. input-requires-label
- 14. tags-check
- 15. tag-pair
- 16. tag-self-close
- 17. tagname-lowercase
- 18. empty-tag-not-self-closed
- 19. src-not-empty
- 20. href-abs-or-rel
- 21. id-class-ad-disabled
- 22. id-class-value
- 23. id-unique
- 24. inline-script-disabled
- 25. inline-style-disabled
- 26. space-tab-mixed-disabled
- 27. spec-char-escape
HTMLHintのルールを解説
HTMLHintを使用している人は多いがHTMLHintのルールについて知っている人は少ない。
HTMLHintのList of rulesに記載されているものは27個しかないので、HTMLHintを使用するのであればすべて覚えたほうが良いだろう。
HTMLHintはグローバルにインストールしておけばhtmlhint [URL]でチェックすることもできる。
npm install htmlhint -g
htmlhint https://iwb.jp/s/htmlhint-27-list-of-rules/ng-doctype-first.html
キャッシュが効いて最新のHTMLがチェックできていないときは語尾に?fooなどを入れて別URLとして実行する。
htmlhint "https://iwb.jp/s/htmlhint-27-list-of-rules/ng-doctype-first.html?foo"
ファイルなしでもエラーにならない
存在しないファイルやURLを指定しても「Scanned 0 files, no errors found」と表示されてファイルやURLが存在しないというエラーは表示されないので特にURLを指定する場合は間違えないよう注意が必要。
$ htmlhint https://example-sample.com/ Scanned 0 files, no errors found (14 ms).
ルールによっては.htmlhintrcが必要
ルールによっては.htmlhintrcファイルを用意してtrueを指定しないとルールが適用されない。
ちなみにほとんどのルールをtrueにする場合は以下のようになる。
(ほとんどtrueにするのは実用的ではない。trueの指定がないものもある)
{ "doctype-first": true, "doctype-html5": true, "head-script-disabled": true, "style-disabled": true, "title-require": true, "attr-lowercase": ["viewBox"], "attr-no-duplication": true, "attr-no-unnecessary-whitespace": true, "attr-unsafe-chars": true, "attr-value-double-quotes": true, "attr-value-not-empty": true, "alt-require": true, "input-requires-label": true, "tags-check": true, "tag-pair": true, "tag-self-close": true, "tagname-lowercase": true, "empty-tag-not-self-closed": true, "src-not-empty": true, "href-abs-or-rel": "rel", "id-class-ad-disabled": true, "id-class-value": false, "id-unique": true, "inline-script-disabled": true, "inline-style-disabled": true, "space-tab-mixed-disabled": "space", "spec-char-escape": true }
attr-lowercaseだけtrueだと都合が悪いことが多いので["viewBox"]で例外を指定しました。 (詳細はattr-lowercaseの説明を参照)
.htmlhintrcを作成してもローカルのファイルではなくURLの場合は以下のように--configで.htmlhintrcを指定して実行しないと設定が反映されない。
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-doctype-first.html
コマンドが長いので.bashrcでaliasの設定をオススメする。
alias h='htmlhint --config .htmlhintrc'
1. doctype-first
Doctypeが最初に宣言されているか。
以下のように最初に宣言されていれば違反しない。
<!DOCTYPE html>
<html></html>
以下は違反です。
1行目ではなく最初に記載されていなければ違反です。
<!--comment--><!DOCTYPE html>
<html></html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-doctype-first.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-doctype-first.html
2. doctype-html5
Doctypeがhtml5か。
以下は違反ではない。
<!DOCTYPE HTML>
<html></html>
以下は違反です。
<!DOCTYPE nghtml>
<html></html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-doctype-html5.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-doctype-html5.html
3. head-script-disabled
headタグ内にscriptタグの記述がないか。
以下は違反ではない。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
<script src="index.js"></script>
</body>
</html>
以下は違反です。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Sample</title>
<script src="index.js"></script>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-head-script-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-head-script-disabled.html
4. style-disabled
styleタグが含まれてないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<style>
body {
padding: 0;
}
</style>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-style-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-style-disabled.html
5. title-require
head内にtitleタグがあり、titleが書かれているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
以下はtitleが空なので違反です。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
titleと中身があっても、head内になければ違反です。
titleはbodyに書いてもブラウザはタブにtitleを表示するので目視だと気づきにくい。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<title>Sample</title>
<h1>Sample</h1>
</body>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-title-require.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-title-require.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-title-require-02.html
6. attr-lowercase
属性名に大文字が含まれていないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<link Rel="stylesheet" href="index.css" />
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-lowercase.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-lowercase.html
ただし、属性名はsvgタグのviewBoxのように大文字と小文字の混合が正しい表記もあるため、.htmlhintrcに"attr-lowercase": ["viewBox"], のようにエラーにしない設定を追記しておく必要がある。
7. attr-no-duplication
タグに同じ属性があるか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<link rel="stylesheet" rel="stylesheet" href="index.css" />
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-no-duplication.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-no-duplication.html
8. attr-no-unnecessary-whitespace
属性の=の前後のどちらかに不要な半角スペースがあるか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<p title="foo">sample</p>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<p title = "foo">sample</p>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-no-unnecessary-whitespace.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-no-unnecessary-whitespace.html
9. attr-unsafe-chars
属性名に不必要な不可視文字などが含まれていないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<a href="/" title="sample">sample</a>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href="/" title="sample">sample</a>
</html>
VS Codeだと不可視文字なので見えないが、以下の正規表現に一致するu200eの文字がhref内の値に含まれている。
/[\u0000-\u0009\u000b\u000c\u000e-\u001f\u007f-\u009f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-unsafe-chars.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-unsafe-chars.html
10. attr-value-double-quotes
属性の値がシングルクォーテーションではなくダブルクォーテーションになっているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<a href="/" title="sample">sample</a>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href='/' title="sample">sample</a>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-value-double-quotes.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-value-double-quotes.html
11. attr-value-not-empty
属性の値が指定されているか。(空の値は問題ない)
以下は違反ではない。
<!DOCTYPE html>
<html>
<a href="/" title="">sample</a>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href="/" title>sample</a>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-attr-value-not-empty.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-attr-value-not-empty.html
12. alt-require
img, area, input[type=image] のタグにaltが付いているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<img src="a.png" alt="a" title="a" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<img src="a.png" title="a" />
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-alt-require.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-alt-require.html
13. input-requires-label
すべてのinputタグに対応するlabelタグがあるか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<label for="some-id" /><input id="some-id" type="password" />
<label for="some-id2" /><input id="some-id2" type="password" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<label for="some-id" /><input id="some-id" type="password" />
<input id="some-id2" type="password" />
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-input-requires-label.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-input-requires-label.html
タグの使い方が正しいか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<a href="/" title="foo">Link</a>
<img src="a.png" title="foo" alt="bar" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href="/" title="foo" />Link
<img href="a.png" title="foo" alt="bar" />
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-tags-check.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-tags-check.html
15. tag-pair
タグがペアになっているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<p>foo</p>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<p>foo<p>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-tag-pair.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-tag-pair.html
16. tag-self-close
タグが自身で閉じられているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<img src="a.png" title="foo" alt="bar" />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<img src="a.png" title="foo" alt="bar">
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-tag-self-close.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-tag-self-close.html
17. tagname-lowercase
タグ名が小文字になっているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<p>foo</p>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<P>foo</P>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-tagname-lowercase.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-tagname-lowercase.html
18. empty-tag-not-self-closed
単独で属性なしで使えるタグが閉じられているか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<br />
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<br>
</html>
empty-tag-not-self-closedは現在機能していない。(バグ?)
tag-self-closeのほうがエラーになる。
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-empty-tag-not-self-closed.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-empty-tag-not-self-closed.html
19. src-not-empty
linkのhrefやscriptのsrcなどが空ではないか。
src-not-emptyという名称だがhrefもチェックされる。
以下は違反ではない。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css" />
<script src="index.js"></script>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="" />
<script src=""></script>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-src-not-empty.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-src-not-empty.html
20. href-abs-or-rel
リンクを絶対パスまたは相対パスになっているか。
"href-abs-or-rel": "rel", なら相対パスのみ許可する。
通常のWebサイトだと外部リンクがあるので "href-abs-or-rel": false で無効化したほうが良い。
以下は違反ではない。
<!DOCTYPE html>
<html>
<a href="/" title="test">test</a>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href="https://iwb.jp/" title="test">test</a>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-href-abs-or-rel.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-href-abs-or-rel.html
21. id-class-ad-disabled
idまたはclassにad_またはad-が付いているか。
ad_またはad-が付いているとadblockのブロック対象になってしまう。
以下は違反ではないが、adblockでブロックされる。
id="adcontainer" ではなく id="adxontainer" などにすればブロックされない。
<!DOCTYPE html>
<html>
<div id="adcontainer">Ad Container</div>
</html>
以下は違反です。
このコードだとadblockを有効にするとAd Banner部分が表示されません。
<!DOCTYPE html>
<html>
<div id="ad-container">Ad Container</div>
<div id="ad_container">Ad Container</div>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-id-class-ad-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-id-class-ad-disabled.html
22. id-class-value
idとclassの値の付け方を4つの中から指定。
- underline: underline mode ( aaa_bb )
- dash: enable rule ( aaa-bbb )
- hump: enable rule ( aaaBbb )
- false: disable rule
false以外の指定は実用的ではないのでfalseにしたほうが良い。
23. id-unique
idが重複していないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<div id="foo1">foo1</div>
<div id="foo1">foo2</div>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-id-unique.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-id-unique.html
24. inline-script-disabled
scriptがインラインにないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<script>
alert(1)
</script>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<a href="javascript:alert(1)">test</a>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-inline-script-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-inline-script-disabled.html
25. inline-style-disabled
インラインスタイルが使用されていないか。
以下は違反ではない。
<!DOCTYPE html>
<html>
<link href="index.css" rel="stylesheet" />
<h1>sample</h1>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<h1 style="color: red;">sample</h1>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-inline-style-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-inline-style-disabled.html
26. space-tab-mixed-disabled
半角スペースあるいはタブのインデントが適切か。
設定は以下の4種類。space2の設定がないので使い勝手が悪い。
- space: space mode (only spaces are valid for indentation)
- space4: space mode and require 4 space characters
- tab: tab mode (only tab characters are valid for indentation)
- false: disable rule
以下は違反ではない。
<!DOCTYPE html>
<html>
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
</html>
以下は違反です。("space-tab-mixed-disabled": "space" の場合) ※
※ WordPressだとコードのタブが半角スペースに自動変換されるため、実際は\tがコード内にあると思ってください。
<!DOCTYPE html>
<html>
<div id="foo1">foo1</div>
<div id="foo2">foo2</div>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-space-tab-mixed-disabled.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-space-tab-mixed-disabled.html
27. spec-char-escape
特殊文字が変換されているか。( <が> 、 >が<になっているか)
& " などは対象になっていない。
以下は違反ではない。
<!DOCTYPE html>
<html>
<pre>サイコロの出目 > 0 です。</pre>
<pre>"M&Aキャピタルパートナーズ"</pre>
</html>
以下は違反です。
<!DOCTYPE html>
<html>
<pre>サイコロの出目 > 0 です。</pre>
<pre>"M&Aキャピタルパートナーズ"</pre>
</html>
htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ok-spec-char-escape.html htmlhint --config .htmlhintrc https://iwb.jp/s/htmlhint-27-list-of-rules/ng-spec-char-escape.html