W3Cチェッカーでよく出るエラーとその解決方法

Posted on by

Webページを公開する際、W3Cチェッカーを使用してHTMLやCSSのコードを検証することは、
ページの品質向上や標準準拠を目指す上で重要です。
しかし、チェッカーを使用すると、慣れていないと理解が難しいエラーや警告が表示されることがあります。

この記事では、W3Cチェッカーでよく見られるエラーとその意味、
さらに解決方法をわかりやすく説明します。

DOCTYPEの指定ミス

エラー例:

No DOCTYPE found. Expected “<!DOCTYPE html>”.

原因
HTMLドキュメントの最初にDOCTYPE宣言がない、
または間違った宣言が使われている場合に発生します。

解決方法: HTML5の場合、以下のコードをドキュメントの最初に追加してください。

<!DOCTYPE html>

属性の重複

エラー例:

Duplicate attribute “id”.

原因: 同じ要素内で同じ属性が複数回定義されている場合に発生します。

解決方法: 重複している属性を確認し、1つだけ残すようにコードを修正します。

<!-- 修正前 -->
<div id="header" id="main-header"></div>

<!-- 修正後 -->
<div id="main-header"></div>

閉じタグが不足

エラー例:

Unclosed element “div”.

原因
HTMLタグが正しく閉じられていない場合に発生します。
例えば、<div>タグを開いたまま閉じていないなど。

解決方法: 各タグが正しく閉じられているか確認し、不足している閉じタグを追加します。

<!-- 修正前 -->
<div>
  <p>テキスト</p>

<!-- 修正後 -->
<div>
  <p>テキスト</p>
</div>

不正な属性値

エラー例:

Bad value “color:red” for attribute “style” on element “p”: Expected a valid style declaration.

原因: スタイル属性内の記述がCSSとして無効または誤った形式で書かれている場合に発生します。

解決方法: 属性値を正しいCSS形式で記述します。

<!-- 修正前 -->
<p style="color:red;">テキスト</p>

<!-- 修正後 -->
<p style="color: red;">テキスト</p>

alt属性がない画像

エラー例:

An “img” element must have an “alt” attribute.

原因
画像タグにalt属性が指定されていない場合に発生します。
alt属性は、画像が読み込めない場合やアクセシビリティのために重要です。

解決方法: 画像タグに適切なalt属性を追加します。

<!-- 修正前 -->
<img src="image.jpg">

<!-- 修正後 -->
<img src="image.jpg" alt="説明文">

不明なHTML要素

エラー例:

Element “center” not allowed as child of element “div” in this context.

原因: HTML5で非推奨となったタグ（例: <center>）を使用している場合に発生します。

解決方法: 非推奨タグを使用せず、CSSで代替するように変更します。

<!-- 修正前 -->
<center>テキスト</center>

<!-- 修正後 -->
<div style="text-align: center;">テキスト</div>

文字エンコーディングが指定されていない

エラー例:

The character encoding was not declared. Proceeding using “utf-8”.

原因: HTMLの<head>内に文字エンコーディングの指定がない場合に発生します。

解決方法: 以下のように、<meta>タグで文字エンコーディングを指定してください。

<meta charset="UTF-8">

重複するIDの使用

エラー例:

Duplicate ID “nav”.

原因: 同じページ内で同じid値を複数の要素に割り当てている場合に発生します。

解決方法: idはページ内で一意である必要があります。同じidを使用しないように変更します。

<!-- 修正前 -->
<div id="nav"></div>
<div id="nav"></div>

<!-- 修正後 -->
<div id="nav-main"></div>
<div id="nav-footer"></div>

CSSでの未定義クラス

エラー例:

The class “button-red” was used but not defined in any stylesheet.

原因: HTML要素で指定したクラスがCSSファイル内で定義されていない場合に発生します。

解決方法: CSS内でクラスを定義するか、不要なクラスを削除します。

/* CSS */
.button-red {
  color: red;
}

非推奨属性の使用

エラー例:

The “align” attribute on the “div” element is obsolete. Use CSS instead.

原因
HTML5で非推奨となった属性（例: align, bgcolor, borderなど）を使用している場合に発生します。

解決方法: 非推奨属性を削除し、CSSで代替のスタイリングを行います。

<!-- 修正前 -->
<div align="center">テキスト</div>

<!-- 修正後 -->
<div style="text-align: center;">テキスト</div>

未閉じのセルフクローズタグ

エラー例:

Element “img” is missing required attribute “alt”.

原因
セルフクローズタグ（例: <img>や<input>）が正しく閉じられていない、
または必要な属性が不足している場合に発生します。

解決方法: セルフクローズタグに必要な属性を追加し、閉じタグを正しく記述します。

<!-- 修正前 -->
<img src="image.jpg">

<!-- 修正後 -->
<img src="image.jpg" alt="説明文">

iframeタグに必要な属性がない

エラー例:

An “iframe” element must have a “title” attribute.

原因
<iframe>タグにtitle属性が指定されていない場合に発生します。
アクセシビリティの観点で必須となります。

解決方法: title属性を追加して、iframeの内容を説明する短いテキストを記述します。

<!-- 修正前 -->
<iframe src="https://example.com"></iframe>

<!-- 修正後 -->
<iframe src="https://example.com" title="サンプルサイト"></iframe>

リンクの不適切な記述

エラー例:

Bad value “#” for attribute “href” on element “a”: Illegal character in path segment.

原因: href="#"のように不適切なリンクが記述されている場合に発生します。

解決方法
リンク先を明確に指定するか、クリックイベント専用の場合はhrefを省略し、buttonタグを使用します。

<!-- 修正前 -->
<a href="#">リンク</a>

<!-- 修正後 -->
<a href="/about">リンク</a>

フォームに関連するエラー

エラー例:

The “label” element's “for” attribute must refer to a non-hidden “id” attribute.

原因
<label>タグのfor属性が、存在しないまたは隠れている要素のidを参照している場合に発生します。

解決方法: for属性が正しいidを参照するように修正します。

<!-- 修正前 -->
<label for="username">ユーザー名</label>
<input type="text" id="user">

<!-- 修正後 -->
<label for="username">ユーザー名</label>
<input type="text" id="username">

aria属性のエラー

エラー例:

Bad value “button” for attribute “role” on element “div”.

原因: aria属性やrole属性の値がHTML仕様に準拠していない場合に発生します。

解決方法: 正しい値を使用するか、必要ない場合は属性を削除します。

<!-- 修正前 -->
<div role="button">クリック</div>

<!-- 修正後 -->
<button>クリック</button>

未定義のエンコードタイプ

エラー例:

The character encoding declaration must be the first element in the document.

原因: 文字エンコーディングの指定が、HTMLの最初の部分に記述されていない場合に発生します。

解決方法: <meta charset="UTF-8">をドキュメントの最初に記述します。

<!-- 修正前 -->
<title>サンプルサイト</title>
<meta charset="UTF-8">

<!-- 修正後 -->
<meta charset="UTF-8">
<title>サンプルサイト</title>

スペースや改行の不正使用

エラー例:

Whitespace between attributes is required.

原因: 属性間にスペースがない場合や、不適切な改行が含まれている場合に発生します。

解決方法: 属性間にスペースを入れ、適切なフォーマットで記述します。

<!-- 修正前 -->
<input type="text"name="username">

<!-- 修正後 -->
<input type="text" name="username">

HTML構造の論理的エラー

エラー例:

Element “ul” not allowed as child of element “p” in this context.

原因: HTML構造が不適切で、例えば<p>タグの中にリストタグ<ul>が入っている場合に発生します。

解決方法: 要素を適切に入れ子にし、論理的な構造に修正します。

<!-- 修正前 -->
<p>
  こちらはリストです:
  <ul>
    <li>アイテム1</li>
    <li>アイテム2</li>
  </ul>
</p>

<!-- 修正後 -->
<p>こちらはリストです:</p>
<ul>
  <li>アイテム1</li>
  <li>アイテム2</li>
</ul>

まとめ

W3Cチェッカーで出るエラーを理解し、修正することで、
Webページの品質やアクセシビリティを向上させることができます。
本記事を参考に、エラーを効率よく修正して、標準準拠のページを作成しましょう！