HTMLHintを使用しているなら必ず知るべき27のルール

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

14. tags-check

タグの使い方が正しいか。

以下は違反ではない。

<!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つの中から指定。

  1. underline: underline mode ( aaa_bb )
  2. dash: enable rule ( aaa-bbb )
  3. hump: enable rule ( aaaBbb )
  4. 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の設定がないので使い勝手が悪い。

  1. space: space mode (only spaces are valid for indentation)
  2. space4: space mode and require 4 space characters
  3. tab: tab mode (only tab characters are valid for indentation)
  4. 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

特殊文字が変換されているか。( <が&gt; 、 >が&lt;になっているか)

& " などは対象になっていない。

以下は違反ではない。

<!DOCTYPE html>
<html>
<pre>サイコロの出目 &gt; 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
カテゴリーhtml