2021年10月25日

「W3C Markup Validator」のエラーメッセージ10個を解説

HTMLの書き方（文法）チェックを行うツールとして有名な、W3C（ワールドワイドウェブコンソーシアム）が提供する「W3C Markup Validator」の使い方とエラーメッセージについて詳細をまとめます。

②赤枠の欄内にチェックしたいURLを入力＞Check

Address欄の下に”More Options”の項目があります。エラーページでも表示するか、HTMLソースも表示するかなどありますが、それぞれにチェックを入れなくても十分なレベルのチェックができます。基本は”More Options”は触らず、そのままCheckへ進んで問題ありません。

③テスト結果が表示されます

とても動作は軽く、すぐにチェックが終わります。
この画面に表示された内容を元に、どんなエラー、指摘が出ているか見ていきます。

○Error（エラー）
○Warning（警告）

チェックされる項目ごとに、エラーか警告かどちらかのラベルが付きます。
警告は「ここが間違っています」「あまり適していない書き方です」と指示が出ている箇所に付きます。

この記事ではエラーメッセージのうち10個についてメッセージ内容を解説していきます。

２．エラーメッセージ①：言語タグ

エラーメッセージと、エラーが出ている箇所が並列で表示されます。
黄色にマーカーが入っている部分がエラー箇所です。

エラーに対してどのような対策をすればよいのかは、このように↑W3CのWEBサイトに対策が載っている場合もありますが、もし書かれてなかったとしても太字のメッセージ部分を翻訳するとおおよその指示内容はわかるように書かれています。

３．エラーメッセージ②： unnecessary for JavaScript resources

JavaScriptを呼び込むtype属性の設定はHTML5では不要なので、エラーが出ています。過去の制作時に付けていてそのまま…というページもあるかと思いますので、削除します。

■エラーメッセージ
The type attribute is unnecessary for JavaScript resources.
→type属性にJavaScriptのリソースが不要です

指定しなくてもデフォルトでJavaScriptとして処理されるようになっているので、削除して問題有りません。

４．エラーメッセージ③：rel=”canonical”

metaタグはブラウザやクローラーに情報を伝えるために書かれるタグですが、metaタグとして適切でない属性が書かれた場合は指摘が入ります。

■エラーメッセージ
Attribute rel not allowed on element meta at this point.

これはメタタグ内で許可されていない、属性relが使われているという指摘です。
ここで指摘されている、rel=”canonical”　タグは、このタグがあるページが正規のページであるとクローラーに伝えるためのタグです。

Googleはこのタグを使うことを推奨しています。しかしW3Cでは定義されていないためエラーメッセージが出ます。このエラーによってWEBページの表示に問題が出ることはなく、クローラーにとってはわかりやすい有益なタグですので、そのまま記載しておいてトラブルが起こることはありません。

このエラーを回避したい場合は、301リダイレクト機能を使うなどが一般的です。ただ、サーバーの都合やページ構成の都合などで設定できないからrel=”canonical”を使っているケースもあると思いますので、その場合は優先順位を考え、canonical属性を残した運用が有益です。

５．エラーメッセージ④：Duplicate ID

IDタグが1ページ内に重複して使われているという指摘です。

■エラーメッセージ
Duplicate ID ［IDの名前］

IDは1ページ内に1回のみ使うことができるタグのため、複数回出現するとエラーメッセージが表示されます。回避する場合は、それぞれオリジナルのIDタグを設定します。

６．エラーメッセージ⑤：Element div not allowed as child of element ●●

divの構造エラーです。
入れられないところに要素が入っているという指摘です。

■エラーメッセージ
Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)
→divは、h2の子要素として許可されていません。

h2で囲われた中に、入れるべきでないdivが入っているので除去しましょうと指摘されています。

見出しタグである

～

タグ内にはdivを入れられないので、装飾目的の場合はspanタグを使います。

７．エラーメッセージ⑥：there were open elements

閉じ忘れているタグがあるというメッセージです。

■エラーメッセージ
End tag ul seen, but there were open elements.
→ulが閉まっているにも関わらず、リスト内に閉じていない＝開いている要素がある

この↑場合は、リストタグの閉じ忘れでした。

が付いているのに、

が付いていない要素があったため指摘されていました。

他のタグについても、記載ミスなどを発見できます。
こういった細かなヒューマンエラーを見つけてもらえるのはありがたいですね。

８．エラーメッセージ⑦：Unclosed element ●●

こちらもタグの閉じ忘れに関するエラーです。

■エラーメッセージ
Unclosed element figure.
→figure要素が閉じていません。

９．エラーメッセージ⑧：an element of the same type was already open

こちらもタグの記載ミスです。

■エラーメッセージ
Start tag ● seen but an element of the same type was already open.
→●タグが開いている中に、さらに同じタグが記載されています

タグが重複して書かれているという指摘なので、修正します。
リンクタグなどが多いでしょうか。指摘されればすぐ修正できるものなので、こういったタグのミスはすぐ直しておくのがベストですね。

１０．エラーメッセージ⑨：An img element must have an alt attribute

画像にaltタグが設定されていないという指摘です。
altの設定は抜けやすいので、チェックが特に役立ちます。

■エラーメッセージ
An img element must have an alt attribute, except under certain conditions.
→イメージ要素にはalt属性が必須です

適切なaltタグを設定しましょう。

※alt属性の書き方のコツやその他のチェックツールを過去記事で紹介しています。よければこちらもご参考になさってください。過去記事：画像の代替テキスト（alt属性）のスピーディーで最適な書き方と抜け漏れチェック方法

１１．エラーメッセージ⑩：The text content of element time was not in the required format

timeタグに関するエラーです。
不要なところにtimeタグが付いている、datetime形式を満たしていないと指摘されています。

■エラーメッセージ
The text content of element time was not in the required format: The literal did not satisfy the time-datetime format.
→timeタグが必要な要素ではありませんでした。time-datetime形式を満たしていません。

このエラーが出たページでは、日付表示（例：2021年10月22日）の箇所をtimeタグで囲んだだけだったので指摘を受けていました。正しくは以下のように記載する必要があります。

<time datetime=”2021-10-22” itemprop=”datepublished”>2021年10月22日</time>

timeタグを付ける理由は、クローラー等が日付を認識しやすくするために付けるのですが、日付の書き方は言語によってさまざまなため、datetime属性も付けてよりわかりやすく（世界標準で）記載する必要があります。

まとめ

このようなチェックツールを使うことで人的ミスの発見や、これまで必要と思って使っていたタグが不要になっていることを知れるなど、さまざまなメリットがあります。

W3C標準でなくてもクローラーのために付けておきたいタグや、サーバー／CMS等の都合でチェックされても修正できない場合もあるかと思いますが、一つの指針としてチェックツールの結果を用いることでサイト品質を向上させられます。

エラーが見つかったらすぐ修正できそうなタグの閉じ忘れなどは直し、全体構造に関わるところはリニューアル時に検討する材料の一つとしてチェック結果を使ってみてください。

「W3C Markup Validator」のエラーメッセージ10個を解説

１．W3C Markup Validatorの使い方