HTML5のバリデーションを行ってくれるサービス、ソフトウェアまとめ
このエントリーはHTML5 Advent Calendar 2014の12月13日の記事です。
HTML5が勧告になりました。各社のブラウザのHTML5への対応度や互換性はますます向上していくことでしょう。したがって、正しいHTML5を書くように心がけておけば表示の乱れやブラウザごとの見た目の違いは最低限に抑えられるはずです。しかし、どんどん複雑化するHTMLを、typoしないことはもちろん構造的に完全に正しくマークアップするのはなかなか大変です。
そこで今回は、マークアップを自動的にチェックしてくれるツールやサービスをまとめて紹介します。皆さんのWebシステム開発、コーディングにお役立てください。
The W3C Markup Validation Service
W3Cが公式に提供しているバリデーションサービスです。機能は豊富ですし、結果も確実ではあるのですが若干見づらい印象があります。
The W3C Markup Validation Service
Validator.nu
HTML5およびXHTML5のバリデーションを行ってくれます。画像のalt属性をチェックしてくれる機能もあります。URL、ファイルアップロードおよびテキスト入力の3パターンでチェックして欲しい内容が指定できます。
Validator.nu (X)HTML5 Validator
Another HTML-lint 5
チェック結果を日本語で出力してくれる珍しいサービスです。Perl製のAnother HTML-lintをベースにHTML5対応させたサービスになっています。
HTML5 Validator Bookmarklet
上記サイトへURLを渡してくれるブックマークレットを提供しています。ツールバーに登録しておくといつでも検証ができるので便利です。
HTML 5 Validator :: Add-ons for Firefox
Firefoxのアドオンです。インストールするとコンテクストメニューにHTML 5 Validatorという項目が追加されます。これを選択すると新しいタブでValidator.nuが開きます。
HTML 5 Validator :: Add-ons for Firefox
Total Validator
Windows/Mac OSX/Linuxで動作するスタンドアローンなバリデーションチェックツールです。結果はHTMLファイルを生成して表示します。ローカルなのでLAN内部のサーバや開発中のサーバでも容易にチェックができます。スペルチェック機能やアクセシビリティチェックも可能です。
HTML / HTML5 / XHTML / WCAG / Section 508 / CSS / Links / Spelling
HTML & CSS Site Validator
1つのURLではなくサイト全体のバリデーションチェックを行ってくれるサービスです。10,000回バリデーションを行って月額24ドルとなっています。
HTML Validator
現在表示しているサイトのバリデーションチェックを自動的に行ってくれるChrome機能拡張です。エラーの数によってアイコンの数字が変わります。普段の習慣の中でチェックする癖をつけたい方に良さそうです。
HTML Validator – Chrome ウェブストア
The Nu Markup Checker (v.Nu)
Validator.nuをJavaでスタンドアローンとして提供しています。ローカルのファイルやURLを渡すだけでチェックできるので、システムで自動化したり、LAN内のサーバをチェックする場合などに便利です。
$ java -jar ./vnu/vnu.jar http://getbootstrap.com "http://getbootstrap.com":6.53-6.53: error: Bad value “X-UA-Compatible” for attribute “http-equiv” on element “meta”.
mozilla/html5-lint
nodeまたはPythonでバリデーションを行ってくれるツールです。Pythonは単体ファイルでチェックまで行ってくれます。nodeはライブラリとして提供されていますので別途実行スクリプトが必要です。
$ node test.js HTML5 Lint [error]: A “meta” element with an “http-equiv” attribute whose value is “X-UA-Compatible” must have a “content” attribute with the value “IE=edge”. HTML5 Lint [error]: “&” did not start a character reference. (“&” probably should have been escaped as “&”.)
ちょっと試してみたところではHTML5対応とうたっているサイトであってもかなりのエラーやウォーニングが出るようです。もちろん勧告される前の段階で書かれている場合、仕様の変更によってエラーになってしまうケースは多いと思います。今後コーディングしていく中ではぶれなく書けるのでエラーの件数はなるべく減らしていきたいですね。
Webで使えるサービスは手軽ですし、CLIのものは自動チェックするのに良いでしょう。実際、CI対応のものもあります。バリッドなHTML5を目指してぜひ使ってみてください！
hifive開発者ブログ 
コメントは受け付けていません。