HTML Validator の使用法
インストール方法はこちら

概要

HTML Validator アドオンは,Firefox に追加することで,表示中のページの HTML が正しく記述されているかどうかをチェックする機能を持ったアドオンである.

[注: バージョン0.98から,全面的に書き直されて,インストール方法,機能,使用法が大きく変更されている. 以前のバージョンを使っていた人は注意すること.変更点については http://users.skynet.be/mgueury/mozilla/roadmap.html を参照.]

起動方法

1.開発ツールを表示する.(キーボードで Ctrl+Shift+I を押してもよい)
(メニューバーが表示されている場合)「ツール」メニューの「ウェブ開発」から「開発ツールを表示」をクリックする().
開発ツールの表示(1)
(メニューバーが表示されていない場合)右上のメニューボタンメニューボタン)をクリックして表示されるメニューから,「ウェブ開発」をクリックし(),さらに「開発ツールを表示」をクリックする().
開発ツールの表示(2-1)
開発ツールの表示(2-2)
いずれの場合も,Firefox のウィンドウの下半分(あるいはそれ以外の場所)に開発ツールが表示される().
開発ツール(赤い枠内)
2.HTML Varidator(タブ)を開く.
開発ツール内の「HTML varidator」タブHTML varidator タブ)をクリックすると,開発ツール内が HTML Varidator の表示に切り替わる().
HTML varidator タブ(赤い枠内)

画面の構成

開発ツールの HTML Validator タブでは,HTML ソースとエラー/警告の詳細が表示される. この領域の右上に,エラーの種別・位置・内容を表すメッセージのリストが表示されるが, その中のメッセージをクリックして選択すると,右下にその詳細な内容(英語)が表示され, 左半分の HTML ソースで,その場所が示される().

HTML Varidator の画面構成

このの例では,右上の領域で124行目の "Warning: missing </b> before <li>" を選択している(3行目,背景が薄いグレーになっている).右下では,その詳細な解説が表示されていて,左のHTMLソースでは,その位置にピンク色のマークがついている(それ以外のエラーの箇所も,その行の背景が薄いブルーになっている).

HTML のチェック

HTMLのチェックは,いずれも元のデータ(サーバから送られてきたデータ,またはローカルファイル)ではなく, Firefoxの内部で処理されたデータ(JavaScript等が実行された後,ある程度の不備を修正して得られたもの)に対して行われる.

注意点

エラーメッセージ

HTML Validator タブの右上に表示されるエラー等のリストでは,各行が アイコン,種別(Type),行番号(Line),桁位置(Column),エラー等の内容,で構成されている. 種別にはエラー(Error),警告(Warning),その他の情報(Info) 等がある.

メッセージのアイコン

表1: アイコンとその説明
アイコン説明
valid icon ページ内にエラーはない. (これを目指そう!)
warning icon ページ内にエラーはあるが,HTML Validator が修正できる. (clean up… ボタンをクリックすると,修正後のソースを見ることができる.)
error icon ページ内にエラーがある.(HTML Validator にも修正できない)
invalid charset ページ内に非正規な文字が含まれているので,文法チェックができない. (文字コードが誤っている可能性がある?)
cash empty icon キャッシュが空なので文法チェックできない. (再読み込みすればうまくいく場合もある?)
excluded icon ページのURLのドメインが,文法チェックの対象外になっている.
infomation icon 付加的な情報を表すアイコン.多くの場合,直前のメッセージに付け加える情報が記述されている.

種々のメッセージ

Error: <xxx> is not recognized!
意味:<xxx>が認識できない.要は<xxx>というタグは存在しないということ.
対策:タグのセレクタ(要素名)を間違っていないか,タイプミスをしていないか,確認する.
Warning: missing <!DOCTYPE> declaration
意味:DOCTYPE宣言が欠けている.
対策:DOCTYPE宣言を正しく記述する.
Warning: <xxx> is not approved by W3C
意味:<xxx>は,標準的なHTMLのタグではない(特定のブラウザでしか意味を持たないなど).
対策:HTMLの標準的なタグを用いて書き直す.
Warning: <xxx> isn't allowed in <yyy> elements
意味:yyy要素の中(<yyy></yyy>の間)に, xxx要素(<xxx>タグ)を入れるのは許されていない. 要は,その<xxx>タグを,書くべきではないところに書いているということ.
対策:そのxxx要素を適切な場所に移す.または,その場に書ける別の種類の要素(タグ)を用いる.
Warning: missing </xxx> before <yyy>
意味:<yyy>タグの前で終了タグ</xxx>が抜けている(閉じ忘れている). 終了タグを入れ忘れているとき,また,要素同士の入れ子関係が乱れているときにも発生する.
対策:開始タグと終了タグの対応関係を確認し,欠けているものは補い,きちんと入れ子構造になるようにする.
Warning: inserting implicit <xxx>
意味:開始タグ<xxx>をこの位置に補うべきである.主に要素同士の入れ子関係が乱れているときなどに, 終了タグ</xxx>に対応する開始タグ<xxx>を, この位置に挿入するべきであるということ.
対策:開始タグと終了タグの対応関係を確認し,きちんと入れ子構造になるようにする.
Warning: discarding unexpected </xxx>
意味:この終了タグ</xxx>は取り除くべき. つまり,対応する開始タグ<xxx>が見当たらないということ. 要素同士の入れ子関係が乱れているときにも発生する.
対策:開始タグと終了タグの対応関係を確認し,この終了タグが不要なら削除し, きちんと入れ子構造になるようにする.
Warning: missing </xxx>
意味:終了タグ</xxx>が欠けている(閉じ忘れている).
対策:</xxx>を補う.
Warning: trimming empty <xxx>
意味:空の(中身のない)xxx要素(<xxx>タグ)がある. 要は,<xxx></xxx>の間が空っぽだということ.
対策:開始タグ<xxx>と終了タグ</xxx>の間に内容を記述する. 不要な場合は,<xxx></xxx>ごと削除する.
Warning: <xxx> anchor "yyy" already defined
意味:xxx要素(<xxx>タグ)のid属性の値"yyy"はすでに定義されている. 要は"yyy"というid属性値を持った要素(タグ)が2つ以上あるということ.
対策:id属性値を,他と重複しない別の値に変える.
Warning: <xxx> escaping malformed URI reference
意味:xxx要素(<xxx>タグ)が正しくないURI(URL)を参照している. 要は,<a>href属性や<img>src属性などに記述されているURI(URL)で,使ってはいけない文字が使われているということ.
対策:URLでタイプミスがないか確認する.元々不正な文字が含まれているURLの場合は,エスケープを用いた表現(空白文字を%20で表すなど)で記述する.
Warning: <xxx> proprietary attribute "yyy"
意味:xxx要素(<xxx>タグ)で, 一部のブラウザにのみ適用される属性yyyを使っている.
対策:その属性を使わずに,他の方法で記述する.
Warning: <xxx> attribute "yyy" has invalid value "zzz"
意味:xxx要素(<xxx>タグ)のyyy属性の値"zzz"は, 不適切な値である.
対策:タイプミスがないか確認する.適切な値に書き直す.
Warning: <xxx> attribute "yyy" lacks value
意味:xxx要素(<xxx>タグ)のyyy属性の値が欠けている. 本来値を持つべき属性に値が与えられていないということ.
対策:属性に適切な値を与える.
Warning: <xxx> attribute "yyy" not allowed for HTML5
意味:xxx要素(<xxx>タグ)の属性yyyは,HTML5では許されていない.
対策:HTML5で記述しているなら,その属性yyyを削除して,必要ならば他の手段を用いる. HTML4.01等で記述している場合は,DOCTYPE宣言が誤っているか,欠けている可能性がある.
Info: <xxx> previously mentioned
意味:直前のメッセージで言及されているxxx要素の開始タグ(<xxx>)の位置を示す.

インストール方法

1.アドオンマネージャを表示する.(キーボードで Ctrl+Shift+A を押してもよい)
(メニューバーが表示されている場合)「ツール」メニューの「アドオン」をクリックする().
(メニューバーが表示されていない場合)右上のメニューボタンメニューボタン)をクリックして表示されるメニューから,「アドオン」アドオン)をクリックする().
アドオンマネージャの表示(1)
アドオンマネージャの表示(2)
2. アドオンマネージャのページの右上の入力欄に「html validator」と入力して, HTML Validator アドオンを検索する().
3. 検索結果のアドオンのリストから「Html Validator」を探し出してクリックする().
アドオンマネージャ
アドオンの検索結果
4. Html Validator のページで「+ Firefoxへ追加」ボタンをクリックし(), 「HTML Validator を追加しますか?」に対して「追加(A)」をクリックする().
Html Validator のページ
アドオン追加の確認
5. しばらく待って,Html Validator の本家ページが開いて右上に丸いアイコン(アイコン)ができていれば,インストール完了.(
インストール直後の画面