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

Web制作

2021年10月25日

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


https://validator.w3.org
※W3CはWEB技術の標準化を目的に活動する非営利の国際団体で、このツールは無料で提供されています。

Validatorの名前の元になっているのはvalidateという英単語で、検証するという意味です。Validatorは検証するツールという意味を持っていて、その名のとおりHTMLやCSSのチェックを行ってくれます。

今回はHTMLのチェックの行い方と、そのチェック後の指摘メッセージの内容について解説します。

■HTMLを正しく記述する重要性
HTML構造に間違いがあると、ブラウザでの表示がおかしくなったり、Googleなどの検索エンジンが正しくページを把握でなくなりデメリットが生じてきたり等の可能性があります。

SEO対策面でのデメリットは、HTML構造が正しくないとGoogleやBingなど検索エンジンのクローラーによる巡回が適切になされず、クローラーによる正しい評価につながらないなどWEBサイトの将来に影響が及ぶことが考えられます。

■HTMLチェックのタイミング
皆さまが制作を依頼する側であれば、W3Cに準拠した制作を行うというところに依頼するのが第一です。すでに依頼先が決まっている場合は、制作段階のできるだけ初期・打ち合わせ時に「W3Cのルールに則ったコーディングをお願いします」と伝えておきます。

基本的にWEBの制作というのは自由な部分があり、W3Cのルールに則らなくても仕上げることができます。しかし、上記のようなデメリットもありますから、できれば準拠したコーディングが望ましいです。一言伝えておき、制作が進んだ段階でチェック、最終段階でチェックと数回行い、修正を依頼するか、技術的に難しい場合はそれによって影響が出る点(対応しないブラウザが出てくる、ファイルサイズが重くなっているなど)を把握することが望まれます。

<HTML以外のチェックツール>
HTML以外にもWEB制作ではチェックしたほうがよい項目がさまざまあります。過去記事「完全保存版!Web制作におけるチェック項目まとめ」に他のツールも色々と載せています。合わせて使ってみてください。

では、実際にチェック画面を見ていきましょう。

1.W3C Markup Validatorの使い方

このツールは、無料でアカウント登録などもなく使い始めることができます。

※もし今ご自身が管理されている、または過去に制作されたWEBサイトをチェックしていくつか指摘項目が上がってきたとしても急に直さず、リニューアル時などにまとめてHTMLの書き直しをすることをオススメします。”標準”は日を追うごとに変化しますし、一旦きちんと仕上がったWEBサイトであれば、このチェックでエラーがあったからといって表示に大きな問題が出ているわけでもないでしょう。急いで手を入れることで全体のエラーにつながる可能性もありますので、修正は慎重に行ってください。

①以下のWEBサイトへアクセス

https://validator.w3.org

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

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

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

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

○Error(エラー)
○Warning(警告)

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

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

2.エラーメッセージ①:言語タグ

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


■エラーメッセージ
Bad value ja_JP for attribute lang on element html: The language subtag ja_jp is not a valid language subtag.

これは言語タグの設定が適切でないとの指摘です。
W3CのWEBサイトでは「日本語に対してja-JPではなく、jaを使用する」とあり、jaが推奨されています。

言語タグを作成するときのゴールデンルールは、できるだけタグを短くすることです。 引用:HTMLとXMLにおける言語タグ

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

3.エラーメッセージ②: unnecessary for JavaScript resources

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

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

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

4.エラーメッセージ③:rel=”canonical”

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

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

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


https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=ja

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

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

5.エラーメッセージ④:Duplicate ID

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

■エラーメッセージ
Duplicate ID [IDの名前]

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

6.エラーメッセージ⑤: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タグを使います。

7.エラーメッセージ⑥:there were open elements

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

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

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

  • が付いているのに、
  • が付いていない要素があったため指摘されていました。

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

    8.エラーメッセージ⑦:Unclosed element ●●

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

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

    9.エラーメッセージ⑧:an element of the same type was already open

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

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

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

    10.エラーメッセージ⑨: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属性)のスピーディーで最適な書き方と抜け漏れチェック方法

    11.エラーメッセージ⑩: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等の都合でチェックされても修正できない場合もあるかと思いますが、一つの指針としてチェックツールの結果を用いることでサイト品質を向上させられます。

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

    今すぐ無料で見積もりを依頼する

    「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」
    そんな時は、制作会社様とのやり取りに特化した、信頼と安心のくまwebにご依頼ください。

    カテゴリ

    最新記事

    今すぐ無料でお見積もりを依頼する

    「納期に間に合わない!」「スタッフの手が空かない!」「技術的に対応できない!」そんな時は、制作業者様とのやり取りに特化した、信頼と安心のくまWebにご依頼ください。