Nu Html Checkerが「type属性省略すべし」と警告を出すので非表示運用にした【WordPress】

私は記事更新の度に、HTML構文の確認ツールとしてNu Html Checkerを使っています。W3C（World Wide Web Consortium：インターネット関連技術の標準化団体）が無償で提供しているものです。

先日久々にこの記事を更新しているときに、このツールが以下の見覚えのない2種類の警告を複数箇所で出していること気がつきました。

Warning: The type attribute is unnecessary for JavaScript resources.
Warning: The type attribute for the style element is not needed and should be omitted.

しかも、過去に「No errors or warnings」という結果だった記事ページに対しても同様の警告が返されていました。

これに対して以下で述べる対処法を考えましたが、結論としては対処法1の記事更新時の運用で対処することにしました。

1 これらの警告の意味
2 対処法1：Nu Html Checkerで警告を無視する
3 対処法2：type属性の発生源を根絶する
- 3.1 タグ生成している箇所を潰す
- 3.2 ベタ書きの箇所を潰す
4 まとめ

これらの警告の意味

まず警告は「scriptタグとstyleタグにはtype属性は不要なため、省略すべき。」と言っています。HTML5の仕様では「type属性」は省略可能です。

githubでこのツールのvalidatorが公開されていて、以下のissueに対するコミットで構文解析のルールをその仕様に合わせて最近対応したようです。

whatwg/html#3024 will land soon and make a number of changes that are relevant to the checker: More clearly require checkers to emit warnings for when its type...

github.com

対処法1：Nu Html Checkerで警告を無視する

真ん中にある、[Message Filtering]ボタンを押します。

以下のように警告の種類毎に一覧表示されます。上で挙げた2種類の警告を無視したい（非表示にしたい）ので、そのチェックボックスをオフにします。

このフィルタをかけた状態で、緑色の「Document checking completed. No errors or warnings to show.」が表示されるまで、いつも通りにhtmlを修正します。

このように記事更新の運用時にひと手間かかりますが、解析結果は以前の通りになり見やすくなったので特に問題は無いです。

対処法2：type属性の発生源を根絶する

忠実に「Nu Html Checker」のルールに従いたい人（最初の私）向けですが、そこまで頑張っても警告がなくなるだけで挙動に差は無いです。

サクッと対処できる範囲ならアリですが、私の場合はサクッと断念しました。

タグ生成している箇所を潰す

このブログはWordpressで運用しているので、StackExchangeのこちらのトピックを参考に、テーマのfunctions.phpに以下のコードを追記します。

scriptタグとstyleタグを生成するときにtype属性を除去しているだけです。

function remove_type_attr($tag) {
    return preg_replace("/type=['\"]text\/(javascript|css)['\"]/", '', $tag);
}
add_filter('script_loader_tag', 'remove_type_attr');
add_filter('style_loader_tag', 'remove_type_attr');

警告は減りましたが、これだけでは全ては消えず不十分でした。