Skip to content

HTML5のバリデーションを行ってくれるサービス、ソフトウェアまとめ

by : 2014/12/13

このエントリーは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対応させたサービスになっています。

Another HTML-lint 5

HTML5 Validator Bookmarklet


上記サイトへURLを渡してくれるブックマークレットを提供しています。ツールバーに登録しておくといつでも検証ができるので便利です。

HTML5 Validator Bookmarklet

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 & CSS Site Validator

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”.

The Nu Markup Checker (v.Nu)

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 “&”.)

mozilla/html5-lint


ちょっと試してみたところではHTML5対応とうたっているサイトであってもかなりのエラーやウォーニングが出るようです。もちろん勧告される前の段階で書かれている場合、仕様の変更によってエラーになってしまうケースは多いと思います。今後コーディングしていく中ではぶれなく書けるのでエラーの件数はなるべく減らしていきたいですね。

Webで使えるサービスは手軽ですし、CLIのものは自動チェックするのに良いでしょう。実際、CI対応のものもあります。バリッドなHTML5を目指してぜひ使ってみてください!

HTML5企業Webシステムのための開発プラットフォーム
hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive

From → まとめ, HTML5

現在コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。